Список пользовательских шрифтов

Текст 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.

Насколько полезно это руководство?

© 2026 DreamNum Co., Ltd.