Question

我有一个预加载在Chrome中的图标字体

invoke

，稍后在我的CSS中使用

进行引用

<transaction-id>

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

尽管如此，我仍然收到Chrome发出的警告：

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

如何摆脱此警告？

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，以便在需要时可以快速加载它。

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

[编辑]
根据此页面this page的介绍，也要先使用preload加载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 */

关于我所能想到的一切。希望这可以帮助。

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

1 个答案: