font-display

auto

ユーザーエージェントで定義されたフォント表示方式です。

block

フォントフェイスのブロック時間 (通常は 3 秒程度) を与え、スワップ時間を無限にします。

swap

フォントフェイスのブロック時間を極端に小さくし、スワップ時間を無限にします。

fallback

フォントフェイスのブロック時間を極端に小さくし、スワップ時間を短くします。

optional

フォントフェイスのブロック時間を極端に小さくし、スワップ時間を与えません。

font-display は font-feature-values の記述子で、フォントの表示タイムラインを決定します。これは、同じ font-family 名の @font-face の既定値 font-display 値を設定することで行います。 @font-face で font-display が省略された場合、ユーザーエージェントはまず、関連するフォントファミリーに対して @font-feature-values によって設定されている font-display 値を探していきます。値が得られない場合、ユーザーエージェントは font-display の auto 値を使用し、その場合はユーザーエージェントがフォント表示方針を決定します。

フォント表示タイムラインは、ユーザーエージェントがダウンロードした特定のフォントフェイスを使用しようとしたときに開始するタイマーに基づいています。タイムラインは、下記の一覧のように 3 つの期間に分割されます。これらの期間は、フォントフェイスを使用する要素のレンダリング動作を決定します。

• フォントブロック期間: フォントフェイスが読み込まれない場合、そのフォントを使用しようとする要素は、見えない予備フォントフェイスでレンダリングされます。ブラウザーは、代替フォントのメトリクスに基づいて、表示されるべきテキストのための空間を確保し、可視テキストのレンダリングをブロックします。ブロック期間中、テキストは表示されません。ブロック期間が終わると、フォントが読み込まれていなければ、テキストは代替フォントでレンダリングされます。

• フォントスワップ期間: スワップ期間はブロック期間（ある場合）の後で、フォントフェイスがまだ正常に読み込まれていない場合に発生します。まだ読み込まれていないフォントを使用しようとする要素は、次に利用できる代替フォントフェイスを使用してレンダリングされます。以前は見えなかった代替フォントフェイスが画面上に描画されます。スワップ期間中にフォントが正常に読み込まれた場合、代替フォントでレンダリングされていたテキストは、新しく読み込まれたフォントで更新（スワップ）されます。この段階が再描画を開始します。

• フォント失敗期間: スワップ期間が終了する時点、またはブロック期間が終了する時点（optional のようにスワップ期間がない場合）までにフォントフェイスが読み込まれなかった場合、ユーザーエージェントはフォントの読み込みに失敗したものとして扱います。その結果、コンテンツは代替フォントで表示されるようになります。

font-display 記述子によって、サードパーティの @font-face ルールなど、作者の制御下にないものも含めて、すべての @font-face ルールに既定の表示ポリシーを設定することができます。 font-display 値が @font-feature-values によって設定されると、それが既定の font-display 値となり、そのフォントファミリー全体に適用されます。しかし、個々の @font-face ブロック内で定義した font-display 値はこれが既定値ですが、記述子を定義したブロックでのみ上書きします。

@font-feature-values "Leitura" {
  font-display: swap;
  @swash {
    fancy: 1;
  }
}

この例の font-display 記述子は、すべての @font-face ブロックに対して、 "Leitura" フォントの既定値 font-display 値を swap に設定します。これで、単一のフォントファミリに対して複数のフォントファイルをインポートしている @font-face ブロックがいくつかあるかもしれません。これらの @font-face ブロックの1つが font-display 記述子を含んでいる場合、指定した値はその特定のフォントファイルにのみ使用します。 font-display 記述子を含まない他のすべてのブロックは、ユーザーエージェントの標準既定値 auto ではなく swap が既定値となります。

この機能を実装しているブラウザーはありません。

• font-display 記述子（@font-face アットルール）
• CSS フォントモジュール