font-display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

font-display は @font-face アットルールの記述子で、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

構文

css
/* キーワード値 */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

値

auto

フォントの表示戦略はユーザーエージェントが定義します。

block

フォントに対して短いブロック時間の後、永続的にスワップ時間を置きます。

swap

フォントに対して非常に短いブロック時間の後、永続的にスワップ時間を置きます。

fallback

フォントに対して非常に短いブロック時間の後、短いスワップ時間を置きます。

optional

フォントに対して非常に短いブロック時間の後、スワップ時間を置きません。

メモ: Firefox では、 gfx.downloadable_fonts.fallback_delay および gfx.downloadable_fonts.fallback_delay_short の設定項目で、それぞれ "short" および "extremely small" の時間が利用できます。

解説

フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時間に分かれます。

  • フォントブロック時間: フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は不可視の代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。
  • フォントスワップ時間: フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。
  • フォント失敗時間: フォントが読み込まれていなければ、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。

公式定義

関連するアット規則@font-face
初期値auto
計算値指定通り

形式文法

font-display = 
  auto      |
  block     |
  swap      |
  fallback  |
  optional

例

font-display のフォールバックの指定

css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/example-font.woff) format("woff"),
    url(/path/to/fonts/example-font.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

仕様書

Specification
CSS Fonts Module Level 4
# font-display-desc

ブラウザーの互換性

BCD tables only load in the browser

関連情報