フォントのプリロードにより、矛盾したテキストのフラッシュ (FOIT) をどのように排除できますか?

最適化された Web フォント レンダリング: ページ レンダリングを遅延して不一致テキストのフラッシュ (FOIT) を軽減

Web デザインにおける「不一致のフラッシュ」 Text" (FOIT) は、意図したカスタム フォントの前にフォールバック システム フォントが最初に表示されるときに発生します。 負荷。これにより、一時的な視覚的な不具合が発生し、ユーザー エクスペリエンスが損なわれる可能性があります。この問題に対処するために、フォント リソースが完全に読み込まれるまでページのレンダリングを遅らせる解決策を検討します。

プリロード手法

最新のブラウザは、次のようなリソースのプリロード メカニズムをサポートしています。 「プリロード」。 <リンク>を使用すると、 「preload」属性を持つ要素を使用すると、ページの残りの部分のレンダリングが開始される前にリソース (この場合はフォント ファイル) をロードするようブラウザに指示します。

実装例

フォント ファイルをプリロードするには、次のコードを に追加します。 HTML ドキュメントのセクション:

<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/Web/HTTP/Headers/Link/rel=preload)
• [Web フォントのプリロード ヒント - Bram Stein](https://alistapart.com/article/preload-hints-for-web-fonts)

フォントをプリロードする利点

プリロードすることによってフォントを使用すると、FOIT 効果を大幅に軽減し、よりスムーズで視覚的に魅力的なユーザー エクスペリエンスを実現できます。このテクニックは、ブランド アイデンティティとメッセージを伝えるためにカスタム タイポグラフィに大きく依存している Web サイトに特に有益です。

以上がフォントのプリロードにより、矛盾したテキストのフラッシュ (FOIT) をどのように排除できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。