くまだどうも、くまだです。
CSSのfont-displayプロパティについてのメモ。
font-displayとは
font-displayプロパティは、Webフォントのダウンロードの状況によって、どのようにフォントを表示させるかを設定できるプロパティです。
@font-faceの中で指定できます。
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap; /* ← ここで指定 */
}Googleフォントの場合は、URLパラメータでdisplay=swapを指定できます。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">取りえる値は以下の通りです。
| 値 | テキスト表示 | フォント切り替え |
|---|---|---|
auto | ブラウザ依存 | ブラウザ依存 |
block | 遅い（見えない） | 必ず切り替え |
swap | すぐ表示 | 必ず切り替え |
fallback | すぐ表示 | 間に合えば切り替え |
optional | すぐ表示 | キャッシュ時のみ |
blockは、Webフォントがダウンロードされるまで、テキストが非表示になります。
optionalは、Webフォントが表示できるか試みる時間帯があり（100ミリ秒）、それ以上時間がかかる場合はローカルフォント表示となります。（再描画はしない）
fallbackは、Webフォント読み込み中、短期間だけテキスト非表示→ローカルフォント表示→読み込み完了後Webフォント表示、となります。
基本的にはswapを使います。フォントが読み込まれるまで、システムフォントが直ちに表示されます。読み込み完了後にWebフォントへ切り替わります。
ここまで読んでくださりありがとうございました。