logo标签列表

预加载 font-awesome 字体库

font-awesomepreload
22

我试图预加载 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 已经使用链接预加载，但在窗口的加载事件后几秒内未被使用。请确保它不是无用的预加载。

输入图片描述 我该如何让它工作？

6个回答
14

在预加载字体时，必须添加crossorigin属性。

    <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"/>
2
这对我没有起作用，我应该把样式放在应用程序文件夹的某个地方吗？ - devssh
2
我尝试在我的<link>预加载中添加crossorigin="anonymous"和crossorigin，但仍然显示警告。 - Aaron Franke
你在使用那个字体吗？ - Barry Pollard
4

除了使用 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"/>

4
那个做什么？它如何回答问题？不要只是脱口而出代码，解释一下你的想法！（这是stackoverflow网站中的一个提示，旨在鼓励回答者提供更加详细易懂的回答） - Rob
4
由于您使用的预加载顺序可能会导致其被加载两次。
<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。 - Shashank Bhatt
0

使用preload的正确方式如下：

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

在意识到我的LightHouse页面速度由于一个LightHouse的错误而不是页面速度引起的错误之前，我无法解决它。

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

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

所以我只需要加载v5.15.0版本而不是v5.10.0版本。

0

尝试使用这个方法：

<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>
1
虽然仅提供代码的答案确实是一个答案，但稍微解释一下（为什么原始问题的代码不起作用，你的代码背后的一般思想，重要点，警告等）可以使它成为一个更好的答案。 - lfurini
2
Max CDN URL 中有多个斜杠。此外，当与图标字体一起使用时，不建议使用 swap 作为值，因为在这种情况下没有备用方案。 - Marcio Duarte
我正在使用多个版本的 Font Awesome（常规、粗体、轻体），所以我也使用 swap。如果一个常规版本无法加载，轻体将作为备用方案。 - Mario Nezmah
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接