State of CSS 2024 にあった font-display について調べた
@font-displayはフォントがダウンロードされ使用可能になるタイミングに基づいて、フォントの表示方法を決定する記述子
指定されたフォントをダウンロードして利用しようとした瞬間のWEBフォントの表示プロセスには以下の３つがある
- フォントブロック時間 (Font Block Period): フォントが読み込まれるまでテキストが非表示
- フォントスワップ時間 (Font Swap Period): フォールバックフォントで一時的にテキストを表示し、ウェブフォントが読み込まれたら置き換え
- フォント失敗時間 (Font Failure Period): 一定時間を超えてもフォントが読み込まれない場合、フォールバックフォントで表示を継続
このfont-display CSSプロパティを使用することで、このフォントの読み込み戦略を制御することができるようになる
取りうる値は以下
auto: ユーザーエージェントによってフォントの読み込み戦略が定義されるblock: 短いフォントブロック時間（ほとんどの場合3秒が推奨）の後、スワップ時間となるようにする- 特定のフォントが表示されるまでの間、フォールバックフォントを表示するより、一時的に空白で表示させた方が画面のチラつきを抑えられて混乱が少ないと思われる場合に使用する
- とはいえ、ずっと空白というわけにはいかないので、最終的にはフォールバックフォントを表示する
swap: 非常に短いフォントブロック時間（ほとんどの場合100ms秒以下が推奨）の後、スワップ時間となるようにする- 特定のフォントが表示されるまでの間、フォールバックフォントを使ってでもなるべく早く文字を表示した方が良いと思われる場合に使用する
fallback: 非常に短いフォントブロック時間（ほとんどの場合100ms秒以下が推奨）の後、短いスワップ時間（ほとんどの場合3秒が推奨）となるようにする- 特定のフォントが表示されるまでの間、フォールバックフォントを使ってでもなるべく早く文字を表示した方が良いと思われる場合に使用するが、長い文章などを読んでいる最中に特定のフォントで表示されるとシフトが発生する可能性があるため、ある程度待ったらフォールバックフォントのまま表示させた方が良いと思われる場合に使用する
optional: 非常に短いフォントブロック時間（ほとんどの場合100ms秒以下が推奨）の後、フォント失敗時間となるようにする- 特定のフォントはサイトの装飾に過ぎず、ダウンロード待つよりは、フォールバックフォントをいち早く表示する方が良いと思われる場合に使用する
