このページは Cloud Translation API によって翻訳されました。

font-display によるフォントパフォーマンスの制御

Rob Dodson

ウェブフォントが読み込まれるときの動作を決定することは、パフォーマンスチューニングの重要な手法です。@font-face の新しい font-display 記述子を使用すると、デベロッパーはウェブフォントの読み込み時間に応じて、ウェブフォントのレンダリング方法（またはフォールバック）を決定できます。

現在のフォントレンダリングの違い

ウェブフォントを使用すると、デベロッパーは豊富なタイポグラフィをプロジェクトに組み込むことができます。ただし、ユーザーがタイポフェイスをまだ所有していない場合、ブラウザはタイポフェイスのダウンロードに時間を要します。ネットワークが不安定な場合、このダウンロード時間はユーザーエクスペリエンスに悪影響を及ぼす可能性があります。表示に時間がかかりすぎるテキストは、どんなに美しくとも誰も気にしません。

フォントのダウンロードが遅くなるリスクを軽減するため、ほとんどのブラウザでは、タイムアウト後にフォールバックフォントが使用されるように実装されています。これは便利な手法ですが、残念ながらブラウザによって実際の実装が異なります。

ブラウザ	タイムアウト	フォールバック	スワップ
Chrome 35 以降	3 秒	はい	はい
Opera	3 秒	はい	はい
Firefox	3 秒	はい	はい
Internet Explorer	0 秒	はい	はい
Safari	タイムアウトなし	該当なし	該当なし

Chrome と Firefox には 3 秒のタイムアウトがあり、タイムアウトするとフォールバックフォントでテキストが表示されます。フォントがダウンロードに成功すると、最終的にスワップが行われ、目的のフォントでテキストが再レンダリングされます。
Internet Explorer のタイムアウトは 0 秒であるため、テキストが即座にレンダリングされます。リクエストされたフォントがまだ利用できない場合は、フォールバックが使用され、リクエストされたフォントが利用可能になると、テキストが再レンダリングされます。
Safari にはタイムアウト動作はありません（少なくともベースラインネットワークタイムアウトを超える動作はありません）。

さらに悪いことに、デベロッパーは、これらのルールがアプリケーションに与える影響を制御する手段が限られています。パフォーマンス重視のデベロッパーは、フォールバックフォントを使用して最初のエクスペリエンスを高速化し、ダウンロードが完了した後のアクセスでのみ、より優れたウェブフォントを利用することをおすすめします。Font Loading API などのツールを使用すると、デフォルトのブラウザ動作の一部をオーバーライドしてパフォーマンスを向上させることができますが、その代償として、大量の JavaScript を記述する必要があります。この JavaScript はページにインライン化するか、外部ファイルからリクエストする必要があります。これにより、HTTP レイテンシが増加します。

この状況を改善するために、CSS Working Group は新しい @font-face 記述子 font-display と、ダウンロード可能なフォントが完全に読み込まれる前にレンダリングされる方法を制御する対応するプロパティを提案しました。

フォントダウンロードのタイムライン

font-display は、一部のブラウザで実装されている既存のフォントタイムアウト動作と同様に、フォントダウンロードの存続期間を 3 つの主要な期間に分割します。

最初の期間はフォントブロック期間です。この期間、フォントフェイスが読み込まれていない場合、そのフォントフェイスを使用する要素は、代わりに不可視のフォールバックフォントフェイスでレンダリングする必要があります。ブロック期間中にフォントフェイスが正常に読み込まれると、フォントフェイスは通常どおり使用されます。
フォントスワップ期間は、フォントブロック期間の直後に発生します。この期間、フォントフェイスが読み込まれていない場合、そのフォントフェイスを使用する要素は、代わりにフォールバックフォントフェイスでレンダリングする必要があります。スワップ期間中にフォントフェイスが正常に読み込まれると、フォントフェイスは通常どおり使用されます。
フォント障害期間は、フォントスワップ期間の直後に発生します。この期間の開始時にフォントフェイスがまだ読み込まれていない場合、読み込みに失敗したとしてマークされ、通常のフォントフォールバックが発生します。それ以外の場合は、フォントが通常どおり使用されます。

これらの期間を理解することで、font-display を使用して、フォントがダウンロードされたかどうかやダウンロードされたタイミングに応じて、フォントのレンダリング方法を決定できます。

最適な font-display はどれですか？

font-display 記述子を使用するには、@font-face アットルールに追加します。

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display は現在、次の値の範囲 auto | block | swap | fallback | optional をサポートしています。

自動

auto は、ユーザーエージェントが使用しているフォント表示戦略を使用します。現在、ほとんどのブラウザのデフォルトの戦略は [ブロック] に似ています。

ブロック

block は、フォントフェイスに短いブロック期間（ほとんどの場合 3 秒が推奨）と無限のスワップ期間を指定します。つまり、フォントが読み込まれていない場合、ブラウザは最初は「見えない」テキストを描画しますが、読み込まれるとすぐにフォントフェイスをスワップします。これを行うために、ブラウザは、選択したフォントと同様の指標を持つ匿名のフォントフェイスを作成しますが、すべてのグリフに「インク」が含まれないようにします。この値は、ページを使用するために特定の書体でテキストをレンダリングする必要がある場合にのみ使用してください。

スワップ

swap は、フォントフェイスに 0 秒のブロック期間と無限のスワップ期間を指定します。つまり、フォントフェイスが読み込まれていない場合は、ブラウザはフォールバックを使用してテキストをすぐに描画しますが、読み込まれるとすぐにフォントフェイスをスワップします。block と同様に、この値は、特定のフォントでテキストをレンダリングすることがページにとって重要であり、どのフォントでレンダリングしても正しいメッセージが伝わる場合にのみ使用する必要があります。ロゴのテキストは入れ替えに適しています。適切な代替フォントを使用して会社の名前を表示すれば、メッセージは伝わりますが、最終的には公式の書体を使用することになるためです。

フォールバック

フォールバックでは、フォントフェイスのブロック期間が非常に短く（ほとんどの場合 100 ミリ秒以下）、スワップ期間も短くなります（ほとんどの場合 3 秒が推奨されます）。つまり、フォントフェイスが読み込まれていない場合は、最初はフォールバックを使用してレンダリングされますが、読み込まれるとすぐにフォントが入れ替わります。ただし、時間が長すぎると、ページの残りの期間はフォールバックが使用されます。フォールバックは、ユーザーができる限り早く読み始めることを希望し、新しいフォントが読み込まれたときにテキストを移動してユーザーエクスペリエンスを妨げたくない本文テキストなどに適しています。

省略可

省略可: フォントフェイスに非常に短いブロック期間（ほとんどの場合 100 ミリ秒以下が推奨）とゼロ秒のスワップ期間を指定します。フォールバックと同様に、ダウンロードフォントが「あったら便利」程度で、エクスペリエンスに不可欠ではない場合に適しています。省略可の値は、フォントダウンロードを開始するかどうかをブラウザに任せます。ブラウザは、ユーザーにとって最適と思われるかどうかに応じて、ダウンロードを開始しないことも、低優先度として実行することもできます。これは、ユーザーの接続が不安定で、フォントをプルダウンしてもリソースを最大限に活用できない場合に役立ちます。

ブラウザサポート

font-display は現在、パソコン版 Chrome 49 の「試験運用版のウェブプラットフォームの機能」フラグで利用可能で、Opera と Opera for Android でリリースされています。

デモ

サンプルで font-display を試してみてください。パフォーマンス重視のデベロッパーにとって、これはツールベルトに追加できる便利なツールです。

font-display によるフォント パフォーマンスの制御

現在のフォント レンダリングの違い

フォント ダウンロードのタイムライン