この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と翻訳です。 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; } まとめると、ブラウザによってフォントのダウンロード戦略が異なります。
では、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 です。オプションの属性とその意味は次のとおりです。
一般的には、フォールバックとオプションに設定できます。 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 プロパティを使用して太字と斜体のバリエーションをレンダリングします。 この方法は、[ 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 を応援していただければ幸いです。 |
<<: MySQL 5.6 マスタースレーブエラー報告の実践記録
序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...
パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...
1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...
目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...
目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...
今日は、さまざまなブラウザでのデフォルト要素のマージン値が何であるかという問題について説明しました。...
flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレス...
これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...
この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...
目次まとめ問題の説明問題を分析する問題を解決するまとめ複雑な知識をシンプルに説明できることは重要です...
方法1: コマンドラインの変更次の図に示すように、MySQL コンソールを開いて「set GLOBA...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...
序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...
1. データベースの文字セットを確認するデータベースの文字セットは、Linux で設定された環境変数...