web-dev-qa-db-ja.com

rel preloadによるフォントのプリロード

スニペットでキャプチャされたrel属性をpreloadに設定した<link> HTMLタグを使用してフォントをプリロードしています未満;

<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">

これは、書体をロードすることで期待どおりに機能しますが、再びロードされます。

GoogleのネットワークタブのスクリーンショットChromeブラウザーは、書体の読み込みを2回示しています-以下を参照してください。

enter image description here

また、Google Chromeブラウザコンソールタブ;

リソース https://example.com/new-v8/fonts/32A0E0.woff2 はリンクプリロードを使用してプリロードされましたが、ウィンドウのロードイベントから数秒以内に使用されませんでした。必ず確認してください適切な「as」値があり、意図的にプリロードされていることを確認してください。

私は何を間違っていますか、どのように修正できますか？

htmlpreload
16
Gareth Jones

Preload-Tagは引数 "crossorigin"を取ります。これは、WebfontがWebサイトと同じホストにある場合でも、Webfontに指定する必要があります。

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-Origin_fetches または https://www.smashingmagazine.com/2016/を参照02/preload-what-is-it-good-for /＃early-loading-of-fonts .

18
Thomas Puppe