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

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

Rob Dodson

読み込み時のウェブフォントの動作は、重要なパフォーマンス調整手法です。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 つに分類します。です。

最初の期間はフォントブロック期間です。この期間中にフォントフェースが読み込まれていません。このフォントを使用しようとする要素は、代わりにレンダリングする必要があります。フォントが非表示になります。読み込み中にフォントフェースが正常にブロック期間が経過すると、フォントフェースは通常どおり使用されます。
フォントスワップ期間はフォントブロック期間の直後に発生します。イベント中フォントフェースが読み込まれていない場合は、そのフォントフェースを使用しようとするすべての要素が代替フォントでレンダリングする必要がありますフォントフェースが正常にスワップ期間中に読み込まれると、その後はフォントフェースが通常どおり使用されます。
フォントエラー期間はあります。この期間の開始時にフォントフェースが読み込まれていない場合は、読み込み失敗としてマークされ、通常のフォントフォールバックが発生します。それ以外の場合、フォントは使用します。

これらの期間を把握することで、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 さんのショットです。パフォーマンスを重視するデベロッパーにとっては、便利なツール！

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

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