CSS の font-display 記述子を使うと、フォントのダウンロードタイミングとその適用についての動作をコントロールすることができます。
本ページでは、font-display 記述子の値ごとに、「Hello, World!」という文字列を表示し、それぞれの動作の違いを観察します。動作の違いが分かりやすいように、フォントファイルは3秒遅れで読み込ませています。
@font-face {
font-family: 'Pacifico-xxxx';
font-display: xxxx;
src: url(Pacifico-Regular.ttf.php) format('truetype');
}| font-display | 表示 | 説明 |
|---|---|---|
| auto | Hello, World! |
ユーザーエージェントのデフォルト表示戦略を使用する。ほとんどのブラウザは、ブロックに似た動作になっている。 |
| block | Hello, World! |
フォントがロードされていない場合、ブラウザは最初に「見えない」テキストを描画する。ロードされるとすぐにフォントを入れ替える。 |
| swap | Hello, World! |
フォントがロードされていない場合、ブラウザはフォールバックを使用してすぐにテキストを描画する。フォントがロードされるとすぐに入れ替える。 フォントをロードしている間も、とにかく早くコンテンツを読んで欲しい場合にはこれがよい。 |
| fallback | Hello, World! |
フォントがロードされていない場合は最初はフォールバックでレンダリングされる。フォントがロードされるとすぐにフォントは交換される。ただし、時間がかかりすぎるとフォールバックが使用される。(Chromeの場合、3秒は時間が掛かりすぎるとみなされるようだ) |
| optional | Hello, World! |
すぐにフォントがダウンロードできれば読み込まればそのフォントで表示を行うが、そうでなければフォールバックでレンダリングされる。 |