CSS @font-face パフォーマンス最適化の詳細な理解

この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と翻訳です。

1. フォントフェイスの基本的な使い方

font-face の基本的な使い方は、基本的に次のようになるので、誰でも知っていると思います。

@フォントフェイス {
	フォントファミリー: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') フォーマット('woff2'),
		 url('font-lato/lato-regular-webfont.woff') フォーマット('woff'),
		 url(font-lato/lato-regular-webfont.ttf) フォーマット("opentype");
}
p { フォントファミリー: Lato, serif; }

これにより、Web ページでカスタム フォントを使用できるようになります。 font-family 属性と src 属性に加えて、font-style 属性と font-weight 属性もあります。 src では複数のフォントを指定でき、順番に適用されます。たとえば、上記の例では、woff2 フォントが最初に読み込まれます。失敗した場合は woff フォントが読み込まれ、失敗した場合は opentype フォントが読み込まれます。 src でサポートされるフォントの種類は次のとおりです。

src パラメータは引用符で囲むことも、囲まないこともできます。パラメータの意味は、次のように形式によって異なります。

src: url(fonts/simple.woff); /* simple.woff をロードします。アドレスはスタイルシートのアドレスに相対的です*/
src: url(/fonts/simple.woff); /* simple.woff をロードします。アドレスは Web サイトの絶対アドレスです*/
src: url(fonts/coll.otc#foo); /* coll.otc 文字セットから foo フォントをロードします */
src: url(fonts/coll.woff2#foo); /* coll.woff2 文字セットから foo フォントをロードします */
src: url(fonts.svg#simple); /* ID が 'simple' の SVG フォントをロードします */

src にロードされるフォント アドレスは、クロスドメイン制約の対象となります。ドメイン間でフォントをロードする場合は、CORS を設定する必要があります。

これは font-face の最も基本的な使用法です。 次に、font-face の使用状況をさらに分析し、最適化戦略を見つけます。

2. フォントはいつダウンロードされますか?

上記はフォントの基礎知識についてお話しましたが、フォントがいつダウンロードされるか考えたことはありますか？ CSS で次のスタイルのみを定義すると、ページが読み込まれたときにフォントが自動的にダウンロードされますか?

@フォントフェイス {
	フォントファミリー: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') フォーマット('woff2'),
		 url('font-lato/lato-regular-webfont.woff') フォーマット('woff'),
		 url(font-lato/lato-regular-webfont.ttf) フォーマット("opentype");
}

残念ながら、フォントはダウンロードされません。通常、ページ要素が font-face で定義されたフォントを使用する場合にのみ、対応するフォントがダウンロードされます。

注: ページ要素が対応するフォントを使用していない場合でも、font-face が定義されている限り IE8 はフォントをダウンロードするため、これは通常のケースと言えます。

他のブラウザでは同じではありません。

たとえば、 FirefoxおよびIE 9以降では、次の状況でフォントがダウンロードされます。

html

<div id="test"></div>

CS

＃テスト {
	フォントファミリー: Lato;
}

何がそんなに特別なのですか? この要素は font-family: Lato スタイルを使用していますが、テキストが含まれていないことに気付いたかもしれません。 ！ ！ 。 理想的な状況では、フォントはテキスト コンテンツがある場合にのみダウンロードされる必要があります。 これは Chrome、Safari (WebKit/Blink など) ブラウザの動作です。

Chrome、Safari (WebKit/Blink など) ブラウザは、次の状況でのみフォントをダウンロードします。

html

<div id="test">ここにテキストがあります</div>

CS

＃テスト {
	フォントファミリー: Lato;
}

まとめると、ブラウザによってフォントのダウンロード戦略が異なります。

• IE8 では、フォントが実際に使用されているかどうかに関係なく、font-face が定義されている限りフォントがダウンロードされます。
• Firefox、IE 9 以降では、要素にテキスト コンテンツがあるかどうかに関係なく、font-face が定義されていて、ページ上にそのフォントを使用する要素がある場合にのみフォントがダウンロードされます。
• Chrome と Safari は、font-face が定義され、ページにフォントが適用された要素があり、その要素にテキスト コンテンツがある場合にのみフォントをダウンロードします。

では、DOM 要素が動的に挿入された場合はどうなるのかと疑問に思うかもしれません。例えば：

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
document.body.appendChild(el);
el.innerHTML = 'コンテンツ。';

答えは同じです。ダウンロード戦略は次のとおりです。

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
/* この時点で、IE8 はフォントのダウンロードを開始します */

document.body.appendChild(el);
/* ここでのみ、Firefox、IE 9 以降はフォントのダウンロードを開始します */

el.innerHTML = 'コンテンツ。';
/* ここでのみ、Chrome と Safari はフォントのダウンロードを開始します */

3. FOIT（目に見えないテキストのフラッシュ）

FOIT は、フォントを読み込むときのブラウザのデフォルトの表示形式です。つまり、フォント読み込みプロセス中は、テキスト コンテンツはページ上で表示されません。最新のブラウザでは、FOIT により、この状態が最大 3 秒間発生する可能性があります。 FOIT はユーザー エクスペリエンスの低下につながるため、可能な限り回避する必要があります。

4. FOUT（スタイルなしテキストのフラッシュ）とfont-display属性

FOUT は、フォント読み込みプロセス中にデフォルトのシステム フォントが使用されることを意味します。フォントが読み込まれると、読み込まれたフォントが表示されます。フォントが FOIT (3 秒) 以内に読み込まれない場合は、デフォルトのシステム フォントが引き続き使用されます。

IE と Edge は、FOIT がタイムアウトするまで待たずに、デフォルトのフォントを表示します。すぐにデフォルトのフォントが表示されます。 FOUT は FOIT よりも優れていますが、それが引き起こすリフローに注意する必要があります。

したがって、ブラウザに FOUT 動作を行わせるには、@font-face: font-display を設定するときに属性を追加する必要があります。 font-display のデフォルト値は auto です。オプションの属性とその意味は次のとおりです。

• 自動。フォント表示ポリシーはユーザーエージェントによって定義されます。
• ブロック。フォント フェイスに短いブロック期間 (ほとんどの場合 3 秒が推奨されます) と無制限のスワップ期間を与えます。
• swap。フォント フェイスに非常に小さなブロック期間 (ほとんどの場合、100 ミリ秒以下が推奨されます) と無制限のスワップ期間を与えます。
• フォールバック。フォント フェイスに非常に短いブロック期間 (ほとんどの場合、100 ミリ秒以下が推奨されます) と短いスワップ期間 (ほとんどの場合、3 秒が推奨されます) を与えます。
• オプション。フォント フェイスに非常に短いブロック期間 (ほとんどの場合、100 ミリ秒以下が推奨されます) と 0 秒のスワップ期間を指定します。

一般的には、フォールバックとオプションに設定できます。

5. プリロード

フォントをより速く読み込むには、ページに次のコードを追加します。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

通常、最も基本的なフォントの使用法で使用される

6. フォントをBASE64URIに変換する

この方法は、@font-face でフォントを定義するときに、フォントの base64 エンコーディングにパスを直接変更します。

利点: このアプローチの利点は、FOIT と FOUT が発生しないことです。したがって、リフローと再描画は行われません。デメリット: base64 に変換されたフォントも非常に大きくなるため、ページの初期読み込み速度に影響します。複数のフォント形式を読み込むためのコンマ区切り形式はサポートされていません。読み込むことができるフォント形式は 1 つだけです。つまり、すべてのブラウザとの互換性を可能な限り確保するためには、woff 形式は互換性が良いため通常は woff 形式を指定しますが、woff2 形式は互換性が悪いため、より小さい woff2 形式は使用できません。

7. BASE64形式のURIフォントを非同期に読み込む

このメソッドは、BASE64 形式のフォント URI を含む CSS リンクを非同期的に挿入します。

8. フォントロードAPI + FOUT + クラス切り替えを使用する

この方法は、最初に @font-face クラスを使用せず、Font Load API を使用して使用したいフォントをロードし、対応する CSS を切り替えます。フォントロード API はネイティブ API です。

document.fonts.load('1em open_sansregular')
.then(関数() {
	var docEl = document.documentElement;
	docEl.className += 'open-sans-loaded';
});

.open-sans-loaded h1 {
	フォントファミリ: open_sansregular;
}

もちろん、この方法ではブラウザの互換性の問題を考慮する必要があります。

9. FOFT (フラッシュ オブ フェイク テキスト)

FOFT はフォント読み込みを複数の部分に分割し、最初にローマン Web フォントを読み込み、実際の太字と斜体が読み込まれるとすぐに font-synthesis プロパティを使用して太字と斜体のバリエーションをレンダリングします。

この方法は、[使用Font Load API + FOUT + class切換] に基づいており、Roman、Bold、Italic、Bold Italic など、同じフォントだが異なる太さやスタイルのロードに非常に適しています。これらのフォントは 2 つの段階に分けられます。最初の段階はローマン フォントで、次にすぐに人工的な太字と斜体をレンダリングし、最後に (2 番目の段階で) 実際のフォントに置き換えます。また、sessionStorage を使用して、繰り返しビューにアクセスするシナリオを最適化することもできます。

10. クリティカル フォフト

CRITICAL FOFT と標準 FOFI の唯一の違いは、第 1 段階でのローマン フォントの読み込みです。CRITICAL FOFT はローマン フォントのセット全体を読み込むのではなく、そのサブセット (A-Za-z0-9 など) のみを読み込みます。セット全体は第 2 段階で読み込まれます。

11. データ URI を使用したクリティカル FOFT

これと CRITICAL FOFT の唯一の違いは、Roman サブセット フォントの読み込み方法です。前のものは Font Load API を使用して実行されていましたが、ここでは Roman サブセット フォントが BASE64 URI にハードコードされて読み込まれます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。