Liste de polices personnalisée
Le texte PDF et le menu des polices de l’éditeur utilisent deux sources liées, mais distinctes.
| Source | Ce qu’elle contrôle |
|---|---|
document.assets.fonts et le fontId d’un segment | Métadonnées et ressources des polices PDF importées servant à reconstruire le contenu natif. |
fontFamily d’un segment éditable | Famille CSS utilisée pour mettre en page et rendre le texte éditable. |
| La liste de polices partagée d’Univer | Options 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 :
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 :
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 :
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 ?