预加载字体很棒

时间:2018-03-14 01:15:58

标签: font-awesome preload

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

enter image description here 我如何让它工作?

4 个答案:

答案 0 :(得分:5)

预加载字体时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"/>

答案 1 :(得分:1)

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

答案 2 :(得分: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>

答案 3 :(得分:0)

由于您要进行预加载,因此它可以加载两次。

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