リファレンス

MDN font-display

https://yceffort.kr/2021/06/ways-to-faster-web-fonts

font-display

意味

font faceの表示方法を決定します.
ダウンロードの有無や利用時間によって異なります.

代替時間:font displayタイムライン

ユーザエージェント(Webブラウザ)が指定したダウンロードフォントを使用する場合は、起動タイマをベースにします.

フォントマスク期間

指定したフォントがロードされていない場合は、非表示の代替フォントとしてレンダリングされます.
この期間中にフォントが正常にロードされると、要求されたフォントとして再レンダリングされます.
つまり、表示されない場合、フォントの読み込みが完了すると、指定したフォントとして表示されます.

フォント置換時間

指定したフォントがロードされていない場合は、代替フォントとしてレンダリングされます.
その間、フォントが正常にロードされると、要求されたフォントとして再レンダリングされます.
すなわち、異なるフォントとして表示されると、フォントのロードが完了すると、指定されたフォントとして表示されます.

フォントの失敗時間

フォントがロードされていない場合、ユーザーエージェントはロードに失敗したと見なし、通常の代替フォントを表示します.
すなわち、指定されたフォントの読み込みに失敗したとみなされ、代替フォントとしてレンダリングされる.

ツールバーの

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

font-display: auto;

ユーザーエージェントによって定義されます.

font-display: block;

短い遮断器と無限長の交換サイクル

が初めて入った時は、遮断器の間(約3秒)で字が見えず、すべてのフォントが同時にロードされているわけではないので、無意識な情報を露出することができます.(FOIT : Font of Invisible Text)

3秒は短い時間ですが、ユーザーは3秒以内にスクロールした可能性があります.😱

font-display: swap;

ブレーカギャップなし&無限長の交換サイクル

フォント変更の様子が露出されます.(FOUT : Font of unstyled Text)

基本フォントが指定フォントと大きく異なる場合、テキストが露出状態になると画面が大幅に切り替わり、不便になります.

font-display: fallback;

非常に短い遮断器と置換周期

の交換には約3秒かかり、その間にフォントがロードされていない場合は、ロールバックフォントが表示されます.

ページのフォントが重要な要素ではない場合は、このオプションが良いかもしれません.

font-display: optional;

非常に短い遮断器-交換時間なし