ウェブフォントの読み込み時の動作を決定することは、パフォーマンス調整の重要な手法です。@font-face の新しいフォント表示記述子を使用すると、デベロッパーは、ウェブフォントの読み込みにかかる時間に応じて、ウェブフォントのレンダリング（またはフォールバック）方法を決定できます。
現在のフォント レンダリングの違い
ウェブフォントを使用すると、デベロッパーはプロジェクトにリッチなタイポグラフィを組み込むことができます。ただし、ユーザーがまだ書体を持っていない場合は、ブラウザがダウンロードに時間を費やさなければならないというトレードオフがあります。ネットワークは不安定な可能性があるため、このダウンロード時間がユーザーのエクスペリエンスに悪影響を与える可能性があります。結局、表示するのに長時間かかると、テキストがどれだけきれいに見えるか気にする必要はありません。
ほとんどのブラウザでは、フォントのダウンロードに時間がかかるリスクを軽減するためにタイムアウトを実装しています。タイムアウト後、代替フォントが使用されます。これは便利な手法ですが、残念ながらブラウザは実際の実装によって異なります。
| ブラウザ | タイムアウト | フォールバック | 入れ替える |
|---|---|---|---|
| Chrome 35 以降 | 3 秒 | はい | はい |
| Opera | 3 秒 | はい | はい |
| Firefox | 3 秒 | はい | はい |
| Internet Explorer | 0 秒 | はい | はい |
| Safari | タイムアウトなし | 該当なし | 該当なし |
- Chrome と Firefox には 3 秒間のタイムアウトがあり、その後テキストは代替フォントで表示されます。フォントのダウンロードに成功した場合は、最終的にスワップが発生し、テキストは目的のフォントで再レンダリングされます。
- Internet Explorer ではタイムアウトが 0 秒に設定されているため、ただちにテキストがレンダリングされます。リクエストされたフォントがまだ使用できない場合はフォールバックが使用され、リクエストされたフォントが使用可能になった後でテキストが再レンダリングされます。
- Safari にはタイムアウト動作がない（少なくとも、ベースラインのネットワーク タイムアウトを超える動作はない）。
さらに悪いことに、これらのルールがアプリケーションにどのように影響するかをデベロッパーが制御できる範囲は限られています。パフォーマンスを重視するデベロッパーは、フォールバック フォントを使用して初期エクスペリエンスを高速にし、2 回目以降のアクセスではダウンロード可能になった後にのみ優れたウェブフォントを利用することを好む場合があります。Font Loading API などのツールを使用すると、デフォルトのブラウザ動作の一部をオーバーライドして、パフォーマンスを向上させることができます。ただし、大量の JavaScript の書き込みが必要になり、ページにインライン化するか、外部ファイルからリクエストする必要があり、追加の HTTP レイテンシが発生します。
この状況を是正するため、CSS ワーキング グループは、新しい @font-face 記述子である font-display と、それに対応するプロパティを提案しました。このプロパティは、ダウンロード可能なフォントが完全に読み込まれる前にレンダリングされる仕組みを制御します。
フォントのダウンロードのタイムライン
一部のブラウザで現在実装されている既存のフォント タイムアウト動作と同様に、font-display はフォント ダウンロードの存続期間を 3 つの主要な期間に分割します。
- 最初の期間はフォント ブロック期間です。この期間中にフォント フェースが読み込まれなかった場合、そのフォント フェースを使用しようとする要素は、代わりに非表示の代替フォント フェースでレンダリングする必要があります。ブロック期間中にフォントフェースが正常に読み込まれると、フォントフェースが通常どおり使用されます。
- フォント スワップ期間はフォント ブロック期間の直後に発生します。この期間中にフォント フェースが読み込まれなかった場合、そのフォント フェースを使用しようとする要素は、代わりに代替フォント フェースでレンダリングする必要があります。スワップ期間中にフォントフェースが正常に読み込まれると、そのフォントフェースが通常どおりに使用されます。
- フォント障害期間は、フォント スワップ期間の直後に発生します。この期間の開始時にフォント フェースがまだ読み込まれていない場合は、読み込み失敗としてマークされ、通常のフォント フォールバックが行われます。それ以外の場合は、フォント フェースが通常どおり使用されます。
この期間を把握することで、font-display を使用して、フォントがダウンロードされたかどうか、またはいつダウンロードされたかに応じて、フォントのレンダリング方法を決定できます。
あなたにぴったりのフォント表示を見つけましょう。
font-display 記述子を操作するには、@font-face at-rules を追加します。
@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 と同様、この値は、特定のフォントでテキストをレンダリングすることがページにとって重要である場合にのみ使用してください。ただし、どのフォントでレンダリングしても、全体的にはメッセージが正しく表示されます。ロゴテキストはスワップの候補として適しています。適切な代替名を使用して会社名を表示するとメッセージが伝わりやすくなりますが、最終的には公式書体が使用されます。
フォールバック
fallback: フォント フェイスのブロック期間は非常に短く（ほとんどの場合は 100 ms 以下が推奨されます）、スワップ間隔が短くなります（ほとんどの場合は 3 秒が推奨されます）。つまり、フォント フェースが読み込まれていない場合はフォールバックしてレンダリングされますが、フォントは読み込まれるとすぐに入れ替えられます。ただし、時間が経過しすぎた場合は、代替が残りのページで使用されます。フォールバックは、本文など、ユーザーにできるだけ早く読み始め、新しいフォントが読み込まれるときにテキストを移動してユーザーのエクスペリエンスを妨げたくない場合に適しています。
省略可
optional は、フォント フェースのブロック期間が非常に短く（ほとんどの場合は 100 ms 以下が推奨されます）とともに、スワップ期間を 0 秒にします。フォールバックと同様に、ダウンロード用フォントが「あれば便利」ではあるものの、エクスペリエンスに重要ではない場合に適しています。optional は、フォントのダウンロードを開始するかどうかをブラウザが決定します。ユーザーにとって最適と考えられるかに応じて、フォントのダウンロードを開始しないことを選択することも、優先度を低くすることもできます。これは、ユーザーの接続が弱く、フォントのプルダウンがリソースの最適な使い方ではないような状況で有用です。
ブラウザ サポート
font-display は現在、パソコン版 Chrome 49 では試験運用版ウェブ プラットフォーム機能フラグを使用しており、Android 版 Opera と Opera で提供されています。
デモ
font-display を試すには、サンプルを確認してください。パフォーマンスを重視するデベロッパーにとって、このツールはさらに便利なツールです。