自定义字体列表

PDF 文本与编辑器的字体菜单使用两个相关但不同的数据源。

数据源控制内容
document.assets.fonts 与文本片段的 fontId用于还原原生内容的已导入 PDF 字体元数据和资源。
可编辑文本片段的 fontFamily可编辑文本布局和渲染时使用的 CSS 字体族。
Univer 共享字体列表PDF 检查器字体下拉框中显示的选项。

向共享列表添加选项不会向 document.assets.fonts 添加资源,也不会下载或嵌入字体文件。

配置编辑器字体列表

editor.enabledtrue 时,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.