Web Font に対する font-display のテスト

CSS の font-display 記述子を使うと、フォントのダウンロードタイミングとその適用についての動作をコントロールすることができます。

本ページでは、font-display 記述子の値ごとに、「Hello, World!」という文字列を表示し、それぞれの動作の違いを観察します。動作の違いが分かりやすいように、フォントファイルは3秒遅れで読み込ませています。

@font-face の記述(詳しくはこのページのソースを見てください)
@font-face {
  font-family: 'Pacifico-xxxx';
  font-display: xxxx;
  src: url(Pacifico-Regular.ttf.php) format('truetype');
}
font-display によるフォント適用の様子を比較する
font-display 表示 説明
auto

Hello, World!

ユーザーエージェントのデフォルト表示戦略を使用する。ほとんどのブラウザは、ブロックに似た動作になっている。
block

Hello, World!

フォントがロードされていない場合、ブラウザは最初に「見えない」テキストを描画する。ロードされるとすぐにフォントを入れ替える。
swap

Hello, World!

フォントがロードされていない場合、ブラウザはフォールバックを使用してすぐにテキストを描画する。フォントがロードされるとすぐに入れ替える。
フォントをロードしている間も、とにかく早くコンテンツを読んで欲しい場合にはこれがよい。
fallback

Hello, World!

フォントがロードされていない場合は最初はフォールバックでレンダリングされる。フォントがロードされるとすぐにフォントは交換される。ただし、時間がかかりすぎるとフォールバックが使用される。(Chromeの場合、3秒は時間が掛かりすぎるとみなされるようだ)
optional

Hello, World!

すぐにフォントがダウンロードできれば読み込まればそのフォントで表示を行うが、そうでなければフォールバックでレンダリングされる。

参考