スニペットでキャプチャされたrel属性をpreloadに設定した<link>
HTMLタグを使用してフォントをプリロードしています未満;
<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">
これは、書体をロードすることで期待どおりに機能しますが、再びロードされます。
GoogleのネットワークタブのスクリーンショットChromeブラウザーは、書体の読み込みを2回示しています-以下を参照してください。
また、Google Chromeブラウザコンソールタブ;
リソース https://example.com/new-v8/fonts/32A0E0.woff2 はリンクプリロードを使用してプリロードされましたが、ウィンドウのロードイベントから数秒以内に使用されませんでした。必ず確認してください適切な「as」値があり、意図的にプリロードされていることを確認してください。
私は何を間違っていますか、どのように修正できますか?
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 .