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

フォント表示の過程

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

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

関連する @規則@font-face
初期値auto
メディア視覚
計算値指定値
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

auto
フォントの表示戦略はユーザーエージェントが定義します。
block
フォントに対して短いブロック期の後、永続的にスワップ期を置きます。
swap
フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。
fallback
フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。
optional
フォントに対して非常に短いブロック期の後、スワップ期を置きません。

形式文法

[ auto | block | swap | fallback | optional ]

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

仕様書

仕様書 策定状況 コメント
CSS Fonts Module Level 4
font-display の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 60Edge 未対応 なしFirefox 完全対応 58IE 未対応 なしOpera 完全対応 47Safari 完全対応 ありWebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile 未対応 なしFirefox Android 完全対応 58Opera Android 完全対応 47Safari iOS 完全対応 ありSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

ドキュメントのタグと貢献者

このページの貢献者: terkel, mfuji09
最終更新者: terkel,