사용자 지정 글꼴 목록

PDF 텍스트와 편집기의 글꼴 메뉴는 서로 관련되지만 다른 데이터 원본을 사용합니다.

원본	제어하는 내용
`document.assets.fonts`와 텍스트 런의 `fontId`	네이티브 콘텐츠 재현에 사용하는 가져온 PDF 글꼴 메타데이터와 리소스.
편집 가능한 텍스트 런의 `fontFamily`	편집 가능한 텍스트의 레이아웃과 렌더링에 사용하는 CSS 글꼴 패밀리.
Univer 공유 글꼴 목록	PDF 검사기의 글꼴 드롭다운에 표시되는 옵션.

공유 목록에 옵션을 추가해도 document.assets.fonts에 에셋이 추가되지 않으며 글꼴 파일을 다운로드하거나 포함하지도 않습니다.

편집기 글꼴 목록 설정

editor.enabled가 true이면 PDF 검사기는 공유 FontFamilyDropdown을 사용합니다. 브라우저 설정의 UniverUIPlugin에서 목록을 구성하세요.

TypeScript

import { UniverUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverUIPlugin, {  container: 'app',  customFontFamily: {    list: [      { value: 'Inter', label: 'Inter', category: 'sans-serif' },      { value: 'Noto Serif', label: 'Noto Serif', category: 'serif' },    ],    override: false,  },})

브라우저 글꼴은 @font-face나 스타일시트로 직접 로드하세요. 로드되지 않으면 Canvas가 브라우저의 대체 글꼴을 사용합니다.

런타임에 옵션 추가

UI Facade를 로드한 뒤 addFonts로 같은 공유 목록에 옵션을 추가할 수 있습니다.

TypeScript

univerAPI.addFonts([  { value: 'Inter', label: 'Inter', category: 'sans-serif' },])

이 메서드는 애플리케이션 글꼴 목록만 업데이트합니다. 글꼴 바이트를 로드하거나 기존 PDF 텍스트 런을 다시 쓰지 않습니다.

편집 가능한 PDF 텍스트에 글꼴 적용

텍스트를 삽입할 때 fontFamily를 전달하거나 PDF Facade로 편집 가능한 텍스트 상자를 업데이트하세요.

TypeScript

const page = univerAPI.getActivePdf()?.getPageByIndex(0)const textBox = page?.insertTextBox({  text: 'Hello PDF',  fontFamily: 'Inter',  fontSize: 14,  left: 36,  top: 36,})textBox?.setTextStyle({ fontFamily: 'Noto Serif' })

page.getTextSpans()가 반환하는 가져온 네이티브 텍스트는 스냅샷이므로 바로 스타일을 바꿀 수 없습니다. replaceText(...)로 편집 가능한 텍스트 상자로 승격한 후 setTextStyle을 호출하세요.

이 가이드는 어떠셨나요?