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

読み込み時のウェブフォントの動作は、 重要なパフォーマンス調整手法です。Google Chat 向けの新しい font-display 記述子 @font-face を使用すると、デベロッパーはウェブフォントのレンダリング(またはフォールバック)方法を決定できます。 読み込み時間によって異なります

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

ウェブフォントを使用すると、リッチなタイポグラフィをウェブフォントに組み込むことができます。 トレードオフがあります。ユーザーがまだ ダウンロードに時間がかかります。ネットワークは ダウンロード時間が不安定な場合、ユーザーのダウンロードに悪影響を 体験できます結局のところ、テキストがどれだけきれいかで 表示されるまでに非常に時間がかかります。

フォントのダウンロードが遅い場合のリスクを軽減するために、ほとんどのブラウザでは、 タイムアウト後に代替フォントが使用されます。これは便利な手法ですが、 残念ながらブラウザは実際の実装に違いがあります。

ブラウザ タイムアウト フォールバック スワップ
Chrome 35 以降 3 秒 はい はい
オペラ 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 つに分類します。 です。

  1. 最初の期間はフォント ブロック期間です。この期間中に フォント フェースが読み込まれていません。このフォントを使用しようとする要素は、代わりにレンダリングする必要があります。 フォントが非表示になります。読み込み中にフォント フェースが正常に ブロック期間が経過すると、フォント フェースは通常どおり使用されます。
  2. フォント スワップ期間はフォント ブロック期間の直後に発生します。イベント中 フォント フェースが読み込まれていない場合は、そのフォント フェースを使用しようとするすべての要素が 代替フォントでレンダリングする必要がありますフォント フェースが正常に スワップ期間中に読み込まれると、その後はフォント フェースが通常どおり使用されます。
  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 秒、スワップ期間を無限大にします。 つまり、フォント フェースが無効な場合、ブラウザは代替を使用して直ちにテキストを描画する は読み込まれませんが、読み込み時にすぐにフォント フェースを入れ替えます。ブロックと同様に、 この値は、特定のフォントでテキストをレンダリングする 重要ではあるものの、どのフォントでも あります。ロゴテキストにはロゴを入れ替えることをおすすめします。 適切な代替名を使用してメッセージが伝わりますが、 最終的には公式書体を使用します

フォールバック

fallback: フォントのブロック期間が非常に短くなります(100 ミリ秒以下 スワップ間隔が短い(3 秒を推奨) できます)。言い換えると、フォント フェースは、 フォントが読み込まれるとすぐに入れ替えられます。ただし、 時間が経過すると、そのページの残りの部分に代替が使用されます。 あります。fallback は、本文に記述する内容の できるだけ早く読み始め 邪魔されたくないという気持ちで 新しいフォントの読み込み時にテキストの位置をずらすことで、操作性が向上します。

省略可

optional は、フォント フェースのブロック期間を非常に短くします(100 ms 以下、 スワップ期間は 0 秒です。フォールバックと同様に、 これは、ダウンロードしたフォントが「あれば便利」な場合に適しています。 ユーザーエクスペリエンスに 重要ではありませんoptional は、 ブラウザはフォントのダウンロードを開始するかどうかを決定し、開始しない場合は 想定する内容によっては優先度が低くなることもあります 選択できます。これは、ユーザーが 接続が不安定でフォントをプルダウンすることは、リソースの最適な使い方とはいえません。

ブラウザ サポート

font-display は現在、試験運用版ウェブ プラットフォーム機能フラグの背後にあります パソコン版 Chrome 49 で提供され、Android 版の Opera と Opera でも出荷されます。

デモ

サンプルを参照して、 font-display さんのショットです。パフォーマンスを重視するデベロッパーにとっては、 便利なツール!