使用的图标字体的Chrome未使用预加载警告

Question

我有一个图标字体，我用Chrome预装

<link rel="preload" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

并在我的CSS后面引用

@font-face {
  font-family: "IconFont";
  src: url(/static/media/IconFont.d9fff078.eot);
  src: url(/static/media/IconFont.d9fff078.eot#iefix)
      format("embedded-opentype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.c8a8e064.woff) format("woff"),
    url(/static/media/IconFont.979fb19e.svg#IconFont) format("svg");
  font-weight: normal;
  font-style: normal;
}

在加载页面的一秒内，我使用Unicode代码点U+E95B和我的图标字体。

不过，我仍然收到Chrome的警告，上面写着：

The resource http://localhost:3000/static/media/IconFont.ad47b1fb.ttf 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.

我该怎么摆脱这个警告？

Answer 1

尝试从rel=“预加载”更改为rel=“预取”。

<link rel="prefetch" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

Rel=“预取”用于特定资源，该资源是必需的，但不是立即使用的。Chrome显然没有及时注册它的使用，并给出警告，这是我的猜测。

如果预取不起作用，请尝试rel=“dns-预取”。Rel=“dns预取”告诉浏览器解析dns，以便在需要时可以快速加载。

不过，我认为预取应该可以工作，因为它实际上请求并下载了资源，并将其存储在缓存中供以后使用，但如果不迅速使用，则不会引起浏览器警告。

编辑

根据此页这个页面，首先使用预加载加载您的css，然后使用您的字体，即

  <link rel="preload" as="style" href="[your-css-file-here.css]">
  <link rel="preload" as="font" crossorigin type="font/tff" href="/static/media/IconFont.ad47b1fb.ttf">

css和字体都是预先加载的，然后页面呈现，所以css不必在字体之后加载。

在css文件中添加"local('IconFont')“，如下所示，完整示例这里

src: local('IconFont'),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("woff"),
    /* continue your font declaration */

我能想到的一切都能帮上忙。希望这能有所帮助。

Answer 2

这是MDN的一个例子。

https://mdn.github.io/html-examples/link-rel-preload/fonts/

这也发出了同样的警告。当我打开developer工具并按Ctrl+F5 (这会迫使浏览器硬加载所有资源)时，不会出现此警告。如果加载带有F5警告的页面，则会出现警告。因此，这应该是浏览器端的一种混乱。但我找不到可靠的答案。

https://github.com/mdn/html-examples/blob/master/link-rel-preload/fonts/index.html

​

​