[英]Chrome unused preload warning for an icon font that is used
我有一个在 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.
我如何摆脱这个警告?
尝试从 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 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')”,如下所示, 此处为完整示例
src: local('IconFont'),
url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
url(/static/media/IconFont.ad47b1fb.ttf) format("woff"),
/* continue your font declaration */
关于我能想到的所有帮助。 希望这可以帮助。
这是一个来自 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.