制作可視化大画面時、フォントの導入は重要な機能です。可視化プロジェクトだけでなく、デザイン関連のプロジェクトにおいても、大量のサードパーティのフォントの使用が関わってきます。
フォントの読み込み時、Chrome は読み込まれていないフォントのテキストを 3 秒間非表示にします。それでも読み込まれない場合、システムフォントにフォールバックします。フォントが読み込まれるまで置き換えは行われません。一方、Safari はフォントファイルの読み込みが完了するまでテキストを常に非表示にします。これはほとんどの良好なネットワーク環境では問題ありませんが、ネットワークの遅延が発生すると、FOIL（フラッシュインビジブルテキスト）と呼ばれる点滅して見えないテキストが発生します。
この問題を解決するために、2 つのことを行います#
- フォールバックテキストを即座に表示することで、空白待機よりも表示がない方が良いです。
- フォントを一括で読み込みしてキャッシュすることです。プロジェクトでは通常、10〜20 種類のフォントファイルが使用されますが、これをローカルにキャッシュすると最適な体験が得られます。
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
font-display は、フォントの表示戦略を指定するプロパティです。
font-display: auto; // カスタム
font-display: block; // 一時的なブロックと無限のスワップサイクル
font-display: swap; // 非常に小さなブロックと無限のスワップサイクル
font-display: fallback; // 非常に小さなブロックと一時的なスワップサイクル
font-display: optional; // 非常に小さなブロックとスワップサイクルなし
font-display を swap に指定すると、現在のシステムにそのフォントがない場合、すぐにデフォルトのフォントに置き換えられ、フォントが読み込まれると置き換えられます。
ここで、テキストが表示されない問題を回避しました。
複数のフォントの読み込み問題の解決#
プロジェクトの読み込み時またはユーザーの操作がない場合、複数のフォントをローカルに読み込むことができます。これには JavaScript の読み込みが必要で、これにより読み込みの動作を正確に制御できます。
// フォントを定義する
const font = new FontFace("myfont", "url(myfont.woff)");
// document.fonts（FontFaceSet）に追加する
document.fonts.add(font);
// フォントを読み込む
font.load();
// フォントがすべて読み込まれるまで待機する
document.fonts.ready.then(() => { // CSSを更新してフォントを使用する});
document.fonts には現在利用可能なフォントが保存されており、forEach を使用して現在のすべての利用可能なフォントを表示できます。
![[Pasted image 20240216110208.png]]
また、この機能を提供する 4.2k スターのオープンソースライブラリもあります。これを使用すると、より細かい制御が可能です。
fontfaceobserver
私のおすすめは、プロジェクトのフォントをいくつかのカテゴリに分け、ローカルフォントは読み込まず、サードパーティのフォントはデータベースに保存し、フロントエンドプロジェクトではフォントローダーを作成し、ローカルフォントとフルフォントを比較して読み込むことです。
現在の可視化パネルで使用されているフォントは、単独で現在のダッシュボード情報に保存され、外部公開時には使用済みのフォントのみを読み込むようにすることができます。