Liste de polices personnalisée

Le texte PDF et le menu des polices de l’éditeur utilisent deux sources liées, mais distinctes.

SourceCe qu’elle contrôle
document.assets.fonts et le fontId d’un segmentMétadonnées et ressources des polices PDF importées servant à reconstruire le contenu natif.
fontFamily d’un segment éditableFamille CSS utilisée pour mettre en page et rendre le texte éditable.
La liste de polices partagée d’UniverOptions affichées dans le sélecteur de l’inspecteur PDF.

Ajouter une option à la liste partagée n’ajoute pas de ressource à document.assets.fonts et ne télécharge ni n’incorpore de fichier de police.

Configurer la liste de l’éditeur

Lorsque editor.enabled vaut true, l’inspecteur PDF utilise le FontFamilyDropdown partagé. Configurez sa liste dans 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,  },})

Chargez chaque police du navigateur avec @font-face ou une feuille de style. Sinon, Canvas utilise une police de remplacement du navigateur.

Ajouter des choix à l’exécution

Après le chargement de la Facade UI, ajoutez des choix à la même liste partagée avec addFonts :

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

Cette méthode ne met à jour que la liste de l’application ; elle ne charge pas les octets de la police et ne réécrit pas les segments PDF existants.

Appliquer une police au texte PDF éditable

Passez fontFamily lors de l’insertion ou mettez à jour une zone de texte avec la Facade PDF :

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' })

Le texte natif importé renvoyé par page.getTextSpans() est un instantané et ne peut pas être stylé sur place. Appelez replaceText(...) pour le convertir en zone éditable avant setTextStyle.

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.