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="preload" 更改为 rel="prefetch"。

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

rel="prefetch" 用于需要但不会立即使用的特定资源。 Chrome 显然没有及时注册它的使用并发出警告，这是我的猜测。

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

我认为 prefetch 应该可以，因为它实际上请求并下载资源并将其存储在缓存中供以后使用，但如果不快速使用它不会导致浏览器警告。

[编辑]
根据 this page 此页面，首先加载您的 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'),"，完整示例 here

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/

这也给出了同样的警告。当我打开开发人员工具并按 Ctrl+F5 时，这会强制浏览器硬加载所有资源，但不会出现此警告。如果我使用 F5 加载页面，则会出现警告。所以这应该是浏览器端的某种混淆。但是我找不到可靠的答案。

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

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

Chrome unused preload warning for an icon font that is used

html

css

fonts

google-chrome

preload