ホームページ >ウェブフロントエンド >CSSチュートリアル >css font-display：Web上でのフォントレンダリングの未来

css font-display：Web上でのフォントレンダリングの未来

Jennifer Anistonオリジナル: 2025-02-16 08:49:17432ブラウズ

キーテイクアウト

CSS Font-Display Decruptorは、ユーザーエクスペリエンスと知覚されたパフォーマンスを向上させることを目的とした、読み込み中にフォントの表示方法を開発者に制御できるようにします。
記述子は、ブロック、スワップ、障害の3つの期間に分割されたタイムラインで動作します。開発者が明示的に割り当てることができないこれらの期間の期間は、ブラウザがテキストをどのようにレンダリングするかを決定します。
時間の経過とともに、ブラウザはこの問題を軽減するためのいくつかの戦略を採用しています。しかし、彼らはさまざまな方法でこれを行い、これらの問題を克服するためにいくつかのテクニックと回避策を考案する必要がありました。

@font-face at-ruleのFont-display記述子を入力します。このCSS機能は、これらの動作を標準化し、開発者により多くの制御を提供する方法を紹介します。 Font-displayを使用して

Font-Displayが提供するさまざまな機能を詳細に見る前に、CSSで機能をどのように使用するかを簡単に検討しましょう。

まず、Font-displayはCSSプロパティではありませんが、イントロで述べたように、 @font-face at-ruleの記述子です。これは、次のコードに示されているように、 @font-faceルール内で使用する必要があることを意味します。

このスニペットでは、フォントSaira condensedのスワップ値を定義しています。 css font-display：Web上でのフォントレンダリングの未来

利用可能なすべての値のキーワードは次のとおりです

auto

block

swap

フォールバック

<span><span>@font-face</span> {
</span>  <span>font-family: 'Saira Condensed';
</span>  <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span>  <span>font-display: swap;
</span><span>}</span>

optional

font-displayの初期値はautoです。

後のセクションでは、これらのそれぞれの値を詳細に説明します。ただし、最初に、ブラウザがレンダリングするフォントを決定するために使用する期間を見てみましょう。各値について議論するときは、タイムラインのさまざまな側面と、これらが各値に対してどのように振る舞うかを説明します。
フォントディスプレイタイムライン
この機能の中核は、フォントディスプレイタイムラインの概念です。フォントの読み込み時間は、その要求から始まり、その読み込みまたは障害が成功したことで終了するため、ブラウザがテキストをどのようにレンダリングするかを決定する3つの連続した期間に分割できます。これらの3つの期間は次のとおりです

ブロック期間。この期間中、ブラウザはテキストを目に見えない
- スワップ期間。目的のフォントがまだ使用できない場合、フォールバックフォントが使用されますが、今回はテキストが表示されます。繰り返しますが、読み込みフォントが入っている場合、使用されます。失敗期間。フォントが使用可能にならない場合、ブラウザはそれを待つことなく、現在のページ訪問の期間にフォールバックフォントとともにテキストが表示されます。これは必ずしもフォントの負荷が中止されていることを意味するわけではないことに注意してください。代わりに、ブラウザはそれを継続することを決定することができます。そうすれば、同じユーザーによる連続したページ訪問でフォントが使用できるようになります。
- そのような期間の期間を調整すると、カスタムテキストレンダリング戦略を構成できます。特に、これらの期間はゼロに崩壊したり、インフィニティに拡張したりする可能性があります。次のセクションで説明します。
- これらの各キーワードがフォントの読み込みと表示プロセスをどのように管理するかを見てみましょう。
font-display：auto
この値は、ブラウザがブラウザによって選択されたデフォルトのフォントディスプレイ動作を採用するようにブラウザに指示します。多くの場合、この戦略は次の値、ブロックに似ています。
font-display：block
この値では、短いブロック期間（仕様は3秒の期間を推奨）の後、スワップ期間は無限に拡張されます。これは、この状況で失敗期間がないことを意味します。
ブラウザが要求されたフォントを一時的に待機している間、目に見えないフォールバックフォントでテキストをレンダリングします。その後、フォントがまだ使用できない場合、フォールバックフォントが表示されます。そして、ダウンロードが完了するたびに、ブラウザは必要なフォントでテキストを再レンダリングします。
次のビデオでこの動作を見ることができます。これは、その見出しに特定のWebフォントを組み込んだ簡単なテストページを使用します。

ページのロードの先頭で、見出しは見えませんが、それはdomにあります。約3秒後、フォントがまだ使用できない場合、テキストはフォールバックフォントで表示されます。ビデオデモでは、Chrome Devtoolsのネットワークスロットリング機能を使用して、ネットワーク条件が不十分です。最後に、フォントがなんとかダウンロードしたとき、見出しはそれで再レンダリングされます。
font-display：swap
この値を使用すると、ブロック期間は0に崩壊し、スワップ期間は無限に拡張されます。したがって、ここでも、失敗期間がありません。

言い換えれば、ブラウザはフォントを待つのではなく、代わりにフォールバックフォントでテキストをすぐにレンダリングします。次に、フォントが使用可能になるたびに、テキストはそれで再レンダリングされます。
これを確認しましょう：

https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342017fontdisplay02.mp4
font-display：フォールバック
これは、失敗期間を組み込んだ最初の値です。非常に短いブロック期間（100ミリ秒をお勧めします）の後、スワップ期間は短い期間になります（3秒が推奨されます）。その結果、この期間の終わりに要求されたフォントが準備ができていない場合、テキストはページ訪問期間中にフォールバックフォントを使用して表示されます。これにより、ユーザーエクスペリエンスに耳を傾ける可能性のあるレイアウトシフトが遅れてページ訪問者を邪魔することができません。
以下のこの最初のビデオでは、6秒以上後にフォントがロードされるため、次のことを決して交換しません。

https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342067fontdisplay03.mp4

次のビデオでは、スワップ期間のタイムアウトが始まる前にフォントの読み込みが速くなるため、フォントは予想どおりに使用されます。https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342070fontdisplay04.mp4
font-display：optional

仕様を最初に読んだとき、フォントディスプレイ戦略に割り当てられた名前がそれほど明確ではないことがわかりました。これは、仕様自体でも指摘されています。これは、各戦略の意図された使用をよりよく示し、次の代替案を提案するSPEC使用名の将来のバージョンを示唆しています。
- にとって重要ですフォールバックよりも
- 望ましい
フォントが既に使用可能な場合は、それを使用してください。フォントは、将来のページ訪問で使用する準備ができています
。この値を使用すると、フォントディスプレイのタイムラインには短いブロック期間があります（繰り返しますが、仕様は100ミリ秒の時間間隔を推奨します）とゼロ期スワップ期間があります。したがって、故障期間はすぐにブロック期間に続きます。つまり、フォントが容易に利用できない場合、ページ訪問期間中は使用されません。しかし、最終的にフォントをバックグラウンドで完全にダウンロードできるため、将来のページのロードで即時レンダリングできるようになります。しかし、特にネットワーク条件が低い下で、ユーザーエージェントはフォントのダウンロードを自由に中止したり、開始したりしないことをここで指摘する必要があります。これは、ネットワーク接続の品質に不必要に影響を与えないようにしています。したがって、サイトはまだ使用可能ですが、フォントは将来のページのロードですぐに使用できません。
以下のビデオでは、テストページがネットワークをスロットすることなく読み込まれています。フォントはすぐにダウンロードされますが、短いブロック期間後にのみ、テキストはすべての訪問期間中にフォールバックフォントで表示されます。
https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342072fontdisplay05.mp4

次のビデオでは、ページは同じネットワーク条件の下でリロードされていますが、今回はキャッシュを有効にして、2回目の訪問をシミュレートします。
https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342073fontdisplay06.mp4
そして、あなたがそれを持っているので、見出しは今では望ましいWebフォントでレンダリングします。
先に進む前に、フォールバックとオプションの値を使用するときにブロック期間に推奨される約100ミリ秒の非常に短い期間に注意してください。これは、フォールバックフォントを使用する前に、クイックロードフォントの短い期間（またはキャッシュからのロード）を表示するために、したがって「非スタイルのテキストのフラッシュ」またはFOUTを回避するためです。
私は、オプションと同じ短い間隔を使用する代わりに、Font-Display：Swapを使用するときに、ブロック期間がゼロになる理由を実際に疑問に思いました。スペックのGitHubリポジトリには、「スワップ」に他の「小さなブロック期間」を使用させるようにするためのオープンな問題があります。フォールバックフォントについて

上記の議論では、何度かフォールバックフォントについて言及しました。しかし、これはどこから来るのでしょうか？

フォールバックフォントは、問題の要素上のフォントファミリープロパティを使用して定義されたフォントスタックに存在する最初の使用可能なフォントです。たとえば、テストページでは、見出しのフォントファミリー値は次のとおりです。

これは、たとえば、レンダリングされたフォントとしてArialを使用するWindowsマシンで、検証することができます（オプションについては上記のビデオを参照）。
サポート

フォントディスプレイの記述子のサポートを作成する時点では、次のように見えます。
```
@font-face {
 font-family: 'Saira Condensed';
 src: url(fonts/sairacondensed.woff2) format('woff2');
 font-display: swap;
}
```
Chromeはバージョン60
以来それをサポートしています
オペラは、バージョン47
以来それをサポートしています
Firefoxの開発中で、バージョン46以来旗の後ろに入手できます。
Microsoft Edgeがいつでもそれをサポートすることを兆候はまだありません。 Microsoft Edge Developerフィードバックサイトには、この機能の実装に投票することができるチケットがあります。
- 最新のサポート情報については、caniuse.comを参照してください。
- 上記のように、それはCSSプロパティではなくフォント記述子であるため、Font-Displayサポートを機能クエリでテストできないことに注意する価値があります。このgithub号では、この機能を適切に検出する方法についての議論があります。
- デモページで使用されているフォントがGoogleフォントからのものであることに気付いたかもしれませんが、通常の方法ではロードされていません。つまり、フォントプロバイダーが提供するスタイルシートにリンクしています。代わりに、そのstyleSheetにあるフォントのURLをコピーして、そのURLをカスタム @font-faceルールで使用しました。使用法セクションで見られるように、フォントフェイスルール内でフォントディスプレイを指定する必要があるため、これを行う必要がありました。