사용자 지정 글꼴 목록
글꼴 구조 정의
Univer에서는 IFontConfig 인터페이스를 사용하여 글꼴을 정의합니다.
| 속성 | 타입 | 설명 |
|---|---|---|
value | string | 글꼴의 고유 식별자이며, 일반적으로 CSS font-family에 사용할 우선값입니다. |
label | string | 국제화를 위한 번역 키입니다. Univer 인스턴스를 생성할 때 이 키가 지정되지 않았다면 전달된 값이 그대로 표시됩니다. |
category | 'sans-serif' | 'serif' | 'monospace' | 'display' | 'handwriting' | UI에서 그룹화할 때 사용하는 글꼴 카테고리입니다(선택 사항). |
Univer는 사용자가 설치되지 않은 글꼴을 선택하는 것을 막지 않습니다. 클라이언트에 글꼴이 설치되어 있지 않으면 브라우저가 기본 글꼴로 대체합니다.
사용자 지정 글꼴 사용하기
UniverSheetsCorePreset(프리셋 모드) 또는 UniverUIPlugin(플러그인 모드)의 customFontFamily 매개변수를 구성하여 글꼴 드롭다운 메뉴의 옵션을 정의할 수 있습니다.
TypeScript
univer.registerPlugin(UniverUIPlugin, { container: 'app', customFontFamily: { list: [ { value: 'PingFang SC', label: '苹方（简）', category: 'sans-serif', }, { value: 'Helvetica Neue', label: 'Helvetica Neue', category: 'sans-serif', }, ], // Whether to override the default font list, defaults to false override: true, },})TypeScript
const { univerAPI } = createUniver({ presets: [ UniverSheetsCorePreset({ container: 'app', customFontFamily: { list: [ { value: 'PingFang SC', label: '苹方（简）', category: 'sans-serif', }, { value: 'Helvetica Neue', label: 'Helvetica Neue', category: 'sans-serif', }, ], // Whether to override the default font list, defaults to false override: true, }, }), ],})Facade API
초기화할 때 구성하는 것 외에도 Facade API를 통해 런타임에 새 글꼴을 동적으로 등록할 수 있습니다. 글꼴 리소스를 비동기로 불러와야 하는 경우에 특히 유용합니다.
TypeScript
univerAPI.addFonts([{ value: 'PingFang SC', label: 'PingFang SC', category: 'sans-serif',}, { value: 'Helvetica Neue', label: 'Helvetica Neue', category: 'sans-serif',}])이 가이드는 어떠셨나요?