Web レンダリングでのフォント読み込みの遅延を防ぐにはどうすればよいですか?

Web レンダリングでのフォントの読み込み遅延を軽減する方法

Web ページ上のテキストが、切り替える前に一時的にデフォルトのシステム フォントで表示されることに気付いたことがありますか?目的のカスタムフォントに合わせますか？この遅延は、フォント ファイルのロードにかかる時間が原因である可能性があります。この問題を最小限に抑えたい、または排除したい場合は、利用可能なアプローチを詳しく見てみましょう。

フォントが読み込まれるまでページのレンダリングを延期する

でサポートされている「プリロード」オプションを使用する最新のブラウザは実行可能な解決策です。このオプションは、ページをレンダリングする前にフォント ファイルの読み込みを優先するようにブラウザに指示します。

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

このディレクティブは、指定されたフォント ファイルを早い段階でロードするようにブラウザに指示し、ページのレンダリングが開始されたときにすぐに使用できるようにします。

追加リソース

• [できる私が使用するもの: link-rel-preload](https://caniuse.com/link-rel-preload)
• [rel=preload のドキュメント - MDN](https://developer.mozilla.org/ en-US/docs/Glossary/Prefetch)
• [Web フォントのプリロード ヒント - Bramスタイン](https://bramstein.com/guides/preloading-web-fonts)

以上がWeb レンダリングでのフォント読み込みの遅延を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。