プリロードを使用すると、Web レンダリングにおけるフォントの読み込み遅延をどのように大幅に短縮できるでしょうか?

Web レンダリングにおけるフォントの読み込み遅延を効果的に軽減する

@font-face を介してカスタム フォントを埋め込むことは Web デザインでは一般的な方法ですが、それによってちらつき効果が発生する可能性があります。テキストは最初はデフォルトのシステム フォントで表示され、完了するとカスタム フォントに切り替わります。この望ましくない遅延は、フォント ファイルの非同期ロードによって発生します。

「プリロード」によるプリエンプティブ フォント ロード

この遅延を最小限に抑えるための業界標準のソリューションは、最新のブラウザ。この属性を使用すると、ブラウザはページのコンテンツをレンダリングする前にフォント ファイルの読み込みに優先順位を付けることができます。

プリロードを組み込むことで、指定したフォント ファイルの読み込みを非同期で開始するようにブラウザに指示でき、次の準備が整います。ページがテキストをレンダリングするリクエストを 1 回使用します。その結果、シームレスな移行が行われ、目に見える遅延なくカスタム フォントが適用されます。

たとえば、次のコード スニペットを考えてみましょう:

<link
  rel="preload"
  href="assets/fonts/xxx.woff"
  as="font"
  type="font/woff"
  crossorigin
/>

マスタリーのための追加リソース

このトピックについてさらに詳しく知りたい場合は、次のリソースを参照することをお勧めします:

• [使用できますか: link-rel-preload](https://caniuse.com/#feat=link-rel-preload)
• [rel=preload のドキュメント - MDN](https://developer.mozilla.org/ en-US/docs/Glossary/Prefetch_and_preload)
• [Web フォントのプリロード ヒント - Bramスタイン](https://bramstein.com/blog/2013/01/14/preload-hint-web-fonts/)

以上がプリロードを使用すると、Web レンダリングにおけるフォントの読み込み遅延をどのように大幅に短縮できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。