使用rel预加载预加载字体

Question

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

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

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

Google Chrome浏览器中网络标签的屏幕截图显示两次加载字体 - 请参阅下文;

此外，我在Google Chrome浏览器控制台标签中收到以下警告;

  

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

我做错了什么，如何解决？

Answer 1

您的preload-Tag采用“crossorigin”参数，必须为Webfonts提供，即使它们与您的网站位于同一主机上。

请参阅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。

Answer 2

尝试加载预加载Google字体时，我一直收到警告。

结果是我错过了从Google加载字体作为样式的事实。我通过设置as="style'然后使用rel="stylesheet preload prefetch"解决了这个问题。

请参见下面的代码示例：

<link 
 as="style"
 rel="stylesheet preload prefetch" 
 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" 
 type="text/css" 
 crossorigin="anonymous" />

快乐编码=）

Answer 3

不知道我是否要重新打开此处已经解决的内容，但我只想提一下，您需要将rel =“ preload”链接放置在加载字体的源之后，例如CSS文件。

Answer 4

您必须在预加载行之后添加<link rel="stylesheet" href="fonts/32ADEO.woff2">。

Answer 5

就我而言，更改为rel="stylesheet preload"可以在Chrome上使用-

这是工作-

的最低要求

<link rel="stylesheet preload" href="path/to/stylesheet" as="style" />

不起作用是什么-

<link rel="preload" href="path/to/stylesheet" as="style" />