目次
1. Webフォントの読み込みと font-display
記述子(概要)
Webフォントを使う場合、フォントファイルを読み込むのに多少時間が掛かるため、その間テキストが表示されないままになります。
適用したい Webフォントとは別のフォントでもよいので、なるべく早くテキストを表示させたい場合は、font-display
記述子を使ってその意思をブラウザに指示することができます。
2. font-display
記述子を使ってテキストをすぐに表示させる方法
これを実現するには、以下のように @font-face
の中に font-display: swap;
を記述するだけです。
@font-face {
font-family: 'フォント名';
font-display: swap;
src: url(path/to/フォントファイル) format('フォーマットの種類');
}
デモページを用意しました。
3. font-display
記述子の詳しい説明
font-display
記述子についてもう少し説明しておきます。
font-display
記述子では、フォントをダウンロードする過程を3つの期間に分けて考えます。
順番 | 期間 | 説明 |
---|---|---|
1 | フォントブロック期 |
|
2 | フォントスワップ期 |
|
3 | フォント失敗期 |
|
font-display
の値には以下の種類があり、それぞれ上記の3つの期間の扱い方が異なっています。
値 | 説明 |
---|---|
auto |
|
block |
|
swap |
|
fallback |
|
optional |
|
※ Controlling Font Performance with font-display | Google Developers の内容を元にしていますが、いくつか説明文を追加しています。
この5種類を試すためのデモページを用意しました。
デモページ