预加载字体真棒

Question

我正在尝试预加载 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 已使用链接预加载进行预加载，但在几秒钟内未使用 从窗口的加载事件。请确保它没有预加载 什么都没有。

我如何让它发挥作用？

Answer 1

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

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

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

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

Answer 2

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

1. 预加载所需的资源/字体
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">

Answer 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 就不会再次发送请求来加载它。

Answer 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>

Answer 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"/>

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"/>