Font 추가

nv-suneditor에서는 @import, @font-face를 이용해 웹 폰트 또는 로컬 폰트를 추가할 수 있으며, 에디터 단위 또는 전체 에디터 공통으로 폰트를 적용할 수 있습니다.

TIP

• font-list prop을 사용하면 기본 폰트에 추가로 원하는 폰트를 개별 에디터에만 적용할 수 있습니다.
• 중복된 폰트 이름이 있을 경우 자동으로 병합되므로 충돌은 발생하지 않습니다.
• 폰트는 CSS로 반드시 불러와야 에디터 내에서 적용이 가능합니다.

개별 에디터에 폰트 추가

• 에디터를 사용하는 페이지에서 <style scoped>를 활용하여 폰트를 불러오고, :font-list 속성으로 추가할 수 있습니다.

<nv-suneditor
    v-model="model.content"
    v-model:host="model"
    ref="inputArea"
    ref-target="msg-template"
    ref-target-type="content"
    :ref-target-key="model.id"
    :created-dt="model.createdDt"
    :font-list="['Do Hyeon', 'Hi Melody']"
/>

<style scoped>
    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
    
    @font-face {
        font-family: 'Hi Melody';
        src: url('../../../assets/font/HiMelody-Regular.ttf') format('truetype');
    }
</style>

• Do Hyeon: 구글 웹폰트로 불러오기
• Hi Melody: 로컬 폰트로 직접 추가

전체 에디터 공통 폰트 추가

• v-suneditor.vue 컴포넌트 내부에서 전체 공통으로 사용할 폰트를 정의할 수 있습니다.
• defaultFonts 배열을 수정하여 전체 에디터에서 사용할 기본 폰트 목록을 지정할 수 있습니다.

const defaultFonts = ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georagia', 'tahoma', 'Trebuchet MS', 'Verdana', 'Noto Sans KR', 'Nanum Pen Script']

<style scoped>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Nanum+Gothic&display=swap');
    
    @font-face {
      font-family: 'Nanum Pen Script';
      src: url('../../../assets/font/Nanum-Pen-Script.ttf') format('truetype');
    }
</style>

INFO

로컬 폰트를 사용할 경우 @font-face를 통해 해당 폰트를 등록하고, font-family 이름을 defaultFonts에 추가해야 합니다.