预加载字体很棒

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

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

Answer 2

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

尝试使用此方法：

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