Liste de polices personnalisée
Structure d’une police
Dans Univer, les polices sont définies à l’aide de l’interface IFontConfig :
| Propriété | Type | Description |
|---|---|---|
value | string | Identifiant unique de la police, généralement la valeur à privilégier pour la propriété CSS font-family. |
label | string | Clé de traduction utilisée pour l’internationalisation. Si cette clé n’est pas définie lors de la création de l’instance Univer, la valeur transmise est affichée telle quelle. |
category | 'sans-serif' | 'serif' | 'monospace' | 'display' | 'handwriting' | Catégorie de la police, utilisée pour le regroupement dans l’interface utilisateur (facultatif). |
Univer n’empêche pas les utilisateurs de sélectionner des polices qui ne sont pas installées. Si une police n’est pas installée sur le client, le navigateur la remplace par la police par défaut.
Utiliser des polices personnalisées
Vous pouvez définir les options du menu déroulant des polices en configurant le paramètre customFontFamily de UniverSheetsCorePreset (mode prédéfini) ou de UniverUIPlugin (mode plugin).
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, },})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
Outre la configuration lors de l’initialisation, vous pouvez enregistrer dynamiquement de nouvelles polices pendant l’exécution à l’aide de la Facade API. Cette possibilité est particulièrement utile lorsque les ressources de police doivent être chargées de manière asynchrone.
univerAPI.addFonts([{ value: 'PingFang SC', label: 'PingFang SC', category: 'sans-serif',}, { value: 'Helvetica Neue', label: 'Helvetica Neue', category: 'sans-serif',}])Que pensez-vous de ce guide ?