font-display
font-display
は @font-feature-values
アットルールの記述子は、フォントフェイスがダウンロードされるかどうか、いつかに応じて、どのように表示されるかの既定値を設定します。 @font-feature-values
ブロック内で font-display
記述子に値を設定すると、 @font-face
アットルールの font-display
記述子の既定値を、同じ font-family
値を持つすべてのフォントに対して設定します。
構文
/* キーワード値 */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: 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
が既定値となります。
仕様書
Specification |
---|
CSS Fonts Module Level 4 # descdef-font-feature-values-font-display |
ブラウザーの互換性
この機能を実装しているブラウザーはありません。
関連情報
font-display
記述子(@font-face
アットルール)- CSS フォントモジュール