254

ページにGoogleFontsを含めるための好ましい方法は何ですか？

  1. <link>タグ 経由
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  2. スタイルシートにインポートする 
    @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');
  3. Webフォントローダーの使用
4

4 に答える 4

384

90% 以上のケースで、<link>タグが必要になる可能性があります。経験則として@import、ファイルがフェッチされるまで含まれるリソースのロードを延期するため、ルールを回避する必要があります。また、@import を「フラット化」するビルド プロセスがある場合は、Web フォントで別の問題が発生します。 : Google WebFonts のような動的プロバイダーは、プラットフォーム固有のバージョンのフォントを提供するため、単にコンテンツをインライン化すると、一部のプラットフォームでフォントが壊れてしまいます。

では、なぜ Web フォント ローダーを使用するのでしょうか。フォントのロード方法を完全に制御する必要がある場合。ほとんどのブラウザーは、すべての CSS がダウンロードされて適用されるまで、画面へのコンテンツの描画を延期します。これにより、「スタイル設定されていないコンテンツのフラッシュ」の問題が回避されます。欠点は..コンテンツが表示されるまで、余分な一時停止と遅延が発生する可能性があることです. JS ローダーを使用すると、フォントをいつ、どのように表示するかを定義できます。たとえば、元のコンテンツが画面に描画された後にフォントをフェードインすることもできます。

繰り返しますが、90% のケースは<link>タグです。適切な CDN を使用すると、フォントがすぐにダウンロードされ、キャッシュから提供される可能性がさらに高くなります。

Google Web Fonts の詳細と詳細については、こちらのGDL ビデオをご覧ください。

于 2012-09-12T01:12:53.093 に答える