带有rel preload的预加载字体 [英] preloading font with rel preload

问题描述

我正在使用<link> HTML标记预加载字体，并且 rel 属性设置为 preload ，如下面的代码片段所示.

I am preloading a font using the <link> HTML tag with the rel attribute set to preload as captured in the snippet below;

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

虽然通过加载字体可以按预期工作，但会再次加载.

While this works as expected by loading the typeface, it gets loaded again.

Google Chrome浏览器中网络"标签的屏幕截图显示了两次加载字体-参见下文；

The screenshot of the network tab in Google Chrome browser shows the typeface loading twice - see below;

此外，我在Google Chrome浏览器控制台选项卡中收到以下警告；

Also, I get the following warning in the Google Chrome browser console tab;

资源 https://example.com/new-v8/fonts/32A0E0. woff2 已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用.请确保它具有适当的'as'值，并且是有意预载的.

The resource https://example.com/new-v8/fonts/32A0E0.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate 'as' value and it is preloaded intentionally.

我在做什么错，我该如何解决?

What am I doing wrong and how can I fix it?

推荐答案

您的preload-Tag带有参数"crossorigin"，即使Webfonts与您的网站位于同一主机上，也必须为Webfonts提供该参数.

Your preload-Tag takes the argument "crossorigin", which must be given for Webfonts, even if they are on the same host as your website.

请参见 https://developer.mozilla.org /en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches 或 查看全文