読み込み時のウェブフォントの動作を決定することは、パフォーマンスを調整するための重要な手法です。@font-face の新しいフォント表示記述子を使用すると、デベロッパーは読み込みにかかる時間に応じて、ウェブフォントのレンダリング（またはフォールバック）方法を決定できます。
現在のフォント レンダリングの違い
ウェブフォントを使用すると、デベロッパーは豊富なタイポグラフィをプロジェクトに組み込むことができます。ただし、ユーザーが書体をまだ持っていない場合は、ブラウザでフォントをダウンロードする必要があります。ネットワークが不安定な場合があるため、このダウンロード時間がユーザー エクスペリエンスに悪影響を及ぼす可能性があります。結局のところ、表示に非常に長い時間がかかると、テキストがどれだけ美しくても、誰も気にしないでしょう。
ほとんどのブラウザでは、フォントのダウンロードが遅くなるリスクをある程度軽減するために、タイムアウトが実装されています。その後は代替フォントが使用されます。これは便利な方法ですが、残念ながらブラウザは実際の実装によって異なります。
| 参照者 | タイムアウト | フォールバック | 入れ替える |
|---|---|---|---|
| Chrome 35 以降 | 3 秒 | はい | はい |
| Opera | 3 秒 | はい | はい |
| Firefox | 3 秒 | はい | はい |
| Internet Explorer | 0 秒 | はい | はい |
| Safari | タイムアウトなし | 該当なし | 該当なし |
- Chrome と Firefox には 3 秒間のタイムアウトがあり、その後テキストは代替フォントで表示されます。フォントがダウンロードに成功すると、最終的にスワップが行われ、テキストが目的のフォントで再レンダリングされます。
- Internet Explorer ではタイムアウトがゼロ秒であるため、すぐにテキスト レンダリングが行われます。リクエストされたフォントがまだ利用できない場合は代替が使用され、リクエストされたフォントが利用可能になるとテキストが再レンダリングされます。
- Safari にはタイムアウト動作はありません（最低限、ベースラインのネットワーク タイムアウトを超える動作はありません）。
さらに悪いことに、これらのルールがアプリケーションに与える影響をデベロッパーが制御できる範囲は限られています。パフォーマンスを重視するデベロッパーなら、代替フォントを使用して初期の手間を省くことをおすすめします。また、ダウンロードが可能になった後でアクセスしたときだけ、優れたウェブフォントを使用することをおすすめします。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 のようなデフォルトの戦略があります。
ブロック
block は、フォント フェースのブロック期間を短く（ほとんどの場合は 3 秒を推奨）、スワップ期間を無限にします。つまり、フォントが読み込まれていない場合、ブラウザは最初は「非表示」のテキストを描画しますが、読み込まれるとすぐにフォント フェースを入れ替えます。これを行うために、ブラウザは、選択したフォントに似た指標を持つが、「インク」を含まないすべてのグリフを含む匿名のフォント フェイスを作成します。この値は、ページを利用するために特定の書体でテキストをレンダリングする必要がある場合にのみ使用してください。
スワップ
Swap では、フォント フェースのブロック期間をゼロ秒にし、スワップ期間を無限にします。 つまり、フォント フェースが読み込まれていない場合、ブラウザは代替ですぐにテキストを描画しますが、読み込まれるとすぐにフォント フェースをスワップします。block と同様に、この値は特定のフォントでテキストをレンダリングすることがページにとって重要である場合にのみ使用しますが、どのようなフォントでレンダリングしても正しいメッセージを伝えることができます。ロゴテキストは入れ替えの候補として有用です。合理的な代替文字を使用して会社名を表示するとメッセージを伝えられますが、最終的には正式な書体を使用することになるからです。
フォールバック
fallback は、フォント フェースのブロック期間を非常に短く（ほとんどの場合は 100 ms 以下を推奨）、スワップ期間を短く（ほとんどの場合は 3 秒を推奨）にします。つまり、フォント フェースが読み込まれていない場合は、最初は代替でフォント フェースがレンダリングされますが、読み込まれるとすぐにフォントがスワップされます。ただし、時間がかかりすぎると、ページの残りの期間は代替が使用されます。フォールバックは、本文など、ユーザーができるだけ早く読み始められるようにしたい場合や、新しいフォントが読み込まれるたびにテキストが移動してエクスペリエンスが妨げられないようにする場合に適しています。
省略可
省略可: フォント フェースのブロック期間を非常に短く（ほとんどの場合、100 ms 以下を推奨）、スワップ期間を 0 秒に設定します。これは、ダウンロードするフォントがより「あると良い」ものの、エクスペリエンスにとって重要ではない場合に適しています。optional の値は、フォントのダウンロードを開始するかどうかの判断はブラウザに委ねられており、フォントのダウンロードを開始するかどうかは、ユーザーにとって最適だと思われるかどうかに応じて、低い優先度で実行されます。これは、ユーザーの接続が弱い状況で、フォントのプルダウンがリソースの最適な使い方ではない場合に有効です。
ブラウザ サポート
font-display は現在、パソコン版 Chrome 49 の試験運用版ウェブ プラットフォーム機能フラグの背後にあり、Android 版 Opera と Opera ではリリースされています。
デモ
サンプルを参照して、font-display を試してください。パフォーマンスを重視するデベロッパーにとっては、このツールが役立ちます。