使用 rel preload 预加载字体

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”值并且是有意预加载的。

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

原文由 Gareth Jones 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 。

原文由 Thomas Puppe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原来我错过了一个事实，即字体是作为一种样式从谷歌加载的。我通过设置 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" />

快乐的编码=）

原文由 White Rabbit 发布，翻译遵循 CC BY-SA 4.0 许可协议