预加载字体真棒

Posted 2023-03-03

【中文标题】预加载字体真棒

【英文标题】：Preload font-awesome

【发布时间】：2018-08-22 10:16:43

【问题描述】：

我正在尝试预加载 font-awesome 以改善我的页面加载时间：

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="preload" as="font" type="font/woff2" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

但是...Chrome 似乎下载了两次字体并报告了

资源 http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0 已使用链接预加载进行预加载，但在几秒钟内未使用 从窗口的加载事件。请确保它没有预加载 什么都没有。

我如何让它发挥作用？

【参考方案1】：

直到我意识到 LightHouse 的页面速度由于 LightHouse 错误（与页面速度无关）而出错时，我才弄明白。

LightHouse 希望将“font-display”属性设置为“swap”。

新版本的 FontAwesome 修复了此问题，如下所述：https://github.com/FortAwesome/Font-Awesome/issues/16077

所以我所要做的就是加载版本 v5.15.0 而不是 v5.10.0

【参考方案2】：

使用预加载的正确方法如下：

预加载所需的资源/字体 然后在页面某处使用，不管是在javascript、css还是html中使用。

如果您没有使用预加载的资产/字体，chrome 会警告您在某个时间范围内未使用预加载的字体：

The resource https://link-to-your-font-or-asset was
preloaded using link preload but not used within a few seconds from the
window's load event. Please make sure it has an appropriate `as` value and
it is preloaded intentionally.

如果您尽快需要该字体，您可以执行以下操作：

<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?68c5af1f48e2bfca1e57ae1c556a5c72">

注意rel="preload font"，浏览器会检测到预加载，但由于我们将字体指定为第二个值（当然用空格分隔），它将立即使用预加载的资产/字体。如果您正在预加载样式表，则将样式表作为第二个值。

如果我们将这种方法与加载 fontawesome 样式表结合使用，字体将不会被下载两次，因为我们使用了预加载。以下代码块将仅加载一次 fontawesome 字体 woff2 文件。

<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?68c5af1f48e2bfca1e57ae1c556a5c72">
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?ada6e6df937f7e5e8b790dfea07109b7">
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?c1210e5ebe4344da508396540be7f52c">
<link rel="stylesheet" href="css/fontawesome-fonts.css">

【参考方案3】：

由于您执行预加载的顺序，它可能会加载两次。

<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>

先预加载字体，这样 css @font-face 就不会再次发送请求来加载它。

【讨论】：

您好，当最后有查询字符串时，此预加载是否有效？v=4.3.0 用于版本控制？

【参考方案4】：

试试这个方法：

<style>
@font-face 
      font-family: 'FontAwesome-swap';
      font-display: swap;
      src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
    
</style>

【讨论】：

虽然只有代码的答案确实是一个答案，但有点解释（为什么 OP 的代码不起作用，你的代码背后的一般思想是什么，重点，警告，......）可以使它成为一个更好的答案。

最大 CDN URL 中有多个斜杠。此外，swap 与图标字体一起使用时不推荐使用值，因为在这种情况下没有回退。

我正在使用多个版本的 Font Awesome（常规、粗体、浅色），这也是我使用 swap 的原因。如果一个常规无法加载，灯光将作为后备。

【参考方案5】：

除了使用rel="preload"（您已经做过的）将链接标记为预加载样式表外，我们还需要在文件加载时使用JavaScript 将rel 属性切换为stylesheet：

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

【讨论】：

这是做什么的？它如何回答这个问题？不要只是脱口而出代码。解释你自己！ ***.com/help/how-to-answer

【参考方案6】：

您在预加载字体时must add the crossorigin attribute。

    <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
    <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

【讨论】：

它对我不起作用，我应该将样式放在应用文件夹中的某个位置吗？

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

你在用那个字体吗？