使用rel预加载预加载字体

Question

我正在使用html link rel preload标签预加载字体:

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

虽然这确实首先加载字体,但chrome中的网络选项卡显示两次加载字体!？

我也收到以下警告:

资源https://mydomain.es/new-v8/fonts/32A0E0.woff2使用链接预加载预加载,但在窗口加载事件后的几秒钟内未使用.请确保它请确保它具有适当的<link>值并且是故意预装的.

我究竟做错了什么？

Answer 1

尝试加载预加载谷歌字体时，我不断收到警告。

原来我错过了字体被加载为谷歌样式的事实。我通过设置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 2

您的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 3

不知道我是否要重新打开已经在这里解决的问题，但我只想提一下，您需要将 rel="preload" 链接放在加载字体的源之后，例如 CSS 文件。

Answer 4

就我而言，改为rel="stylesheet preload"在 Chrome上工作 -

这是有效的最低限度-

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

什么没有工作是-

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