カスタムフォントリスト
フォント構造の定義
Univer では、フォントは IFontConfig インターフェースを使用して定義されます：
| プロパティ | 型 | 説明 |
|---|---|---|
value | string | フォントの一意の識別子。通常は CSS font-family の優先値でもあります。 |
label | string | 国際化のための翻訳キー。Univer インスタンス作成時にこのキーが指定されていない場合、渡された値がそのまま表示されます。 |
category | 'sans-serif' | 'serif' | 'monospace' | 'display' | 'handwriting' | フォントカテゴリ。UI のグループ化に使用されます（オプション）。 |
Univer は、ユーザーがインストールされていないフォントを選択することを防ぎません。クライアントに特定のフォントがインストールされていない場合、ブラウザはデフォルトのフォントを使用して代替表示します。
カスタムフォントの使用
UniverSheetsCorePreset（プリセットモード）または UniverUIPlugin（プラグインモード）の customFontFamily パラメータを設定することで、フォントドロップダウンメニューのオプションを定義できます。
TypeScript
univer.registerPlugin(UniverUIPlugin, { container: 'app', customFontFamily: { list: [ { value: 'PingFang SC', label: '苹方（简）', category: 'sans-serif', }, { value: 'Helvetica Neue', label: 'Helvetica Neue', category: 'sans-serif', }, ], // デフォルトのフォントリストを上書きするかどうか、デフォルトは false override: true, },})TypeScript
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', }, ], // デフォルトのフォントリストを上書きするかどうか、デフォルトは false override: true, }, }), ],})Facade API
初期化時の設定に加えて、Facade API を使用して実行時に新しいフォントを動的に登録することもできます。これは、フォントリソースを非同期にロードする必要があるシナリオで非常に役立ちます。
TypeScript
univerAPI.addFonts([{ value: 'PingFang SC', label: 'PingFang SC', category: 'sans-serif',}, { value: 'Helvetica Neue', label: 'Helvetica Neue', category: 'sans-serif',}])このガイドはいかがですか？