使用 rel preload 预加载字体

Posted 2023-03-06

【中文标题】使用 rel preload 预加载字体

【英文标题】：preloading font with rel preload

【发布时间】：2018-09-15 09:04:37

【问题描述】：

我正在使用<link> html 标记预加载字体，其中 rel 属性设置为 preload，如下面的 sn-p 中捕获的那样；

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

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

【问题讨论】：

我在调用 disqus 插件时收到相同的消息：资源 https://c.disquscdn.com/next/embed/styles/lounge.188f59a1df04c219bf32da7f76545092.css was preloaded 使用链接预加载但在窗口加载事件后的几秒钟内未使用。请确保它 请确保它具有适当的as 值并且是有意预加载的。

preload 的目的：“指定页面很快需要的资源，您希望在页面生命周期的早期开始加载，在浏览器的主要渲染机制启动之前。这确保它们可用更早并且不太可能阻塞页面的呈现，从而提高性能。” developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

【参考方案1】：

我在使用自托管字体时遇到了这个问题。我是这样预加载的：

<link rel="preload" href="/fonts/SomeFont.woff2" as="font" type="font/woff2" crossorigin>

问题是 webpack 正在向编译的 css 字体路径添加哈希。

/* Before */
@font-face 
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2") format("woff2");


/* After (Webpack Output) */
@font-face 
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2?7d18a001dd0b6e04c2393") format("woff2");

所以我在预加载标签中添加了相同的哈希值，问题就解决了！

<link rel="preload" href="/fonts/SomeFont.woff2?7d18a001dd0b6e04c2393" as="font" type="font/woff2" crossorigin>

【参考方案2】：

我玩得更开心了。除了这个警告之外，我发现我的浏览器同时下载了woff 和woff2，尽管它应该只下载woff2。在@font-face 中更改src 描述符的顺序对我有帮助。最后，我的解决方案看起来像这样：

<link href="/assets/fira-sans-condensed-v5-max-regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="/assets/bundle.css" rel="stylesheet">

@font-face

    font-display: swap;
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff") format("woff");
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff2") format("woff2");

【参考方案3】：

就我而言，更改为 rel="stylesheet preload" 在 Chrome 上有效 -

这是工作的最低限度 -

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

没有工作的是 -

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

【讨论】：

这似乎适用于 css 文件，但不适用于我猜的字体？

【参考方案4】：

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

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

快乐编码 =)

【讨论】：

MDN: 已经在浏览器中支持了很长时间，但它是为预取而设计的将在下一次导航/页面加载中使用的资源。

这只是发生在你的谷歌字体上，而不是我想的常规字体？

【参考方案5】：

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

【讨论】：

这帮助我发现了我的问题。我在一个 Angular 应用程序中遇到了这个问题，该应用程序延迟加载 fontawesome CSS/字体，并产生渲染延迟。

太棒了！很高兴能提供帮助。

不适合我，它在之前和之后都有效。同样没有“crossorigin”属性，它在慢速 3G 上提高了 50%，但是有了 crossorigin 属性，它是瞬时的，我很震惊这个功能有多好

这背后的原因是什么？

【参考方案6】：

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

【讨论】：

我将 crossorigin="anonymous" 添加到我的预加载 <link> 中，但它仍然给我预加载警告。

该规范一开始似乎很愚蠢，但感谢您指出！