Question

我想使用html预取来预取字体文件。我按照这里的建议：https://css-tricks.com/prefetching-preloading-prebrowsing/

<!doctype html>
<html>
<head>
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html, body {
font-family: 'Open Sans';
}
</style>
</head>
<body>
Hello world
</body>
</html>

但是，该字体文件实际上是在Chrome上加载两次。我没有尝试过其他浏览器。

我做错了什么？

Answer 1

这是prefetch的错误用法。请参阅资源：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="prefetch">是一个指令，告诉浏览器获取下一个导航可能需要的资源。

...

<link rel="subresource">最初计划用于解决当前导航，但它未能以一些惊人的方式执行此操作。

...

您可以使用preload的基本方法是尽早加载已发现的资源。 [...]有些资源隐藏在CSS和JavaScript中

所以，preload是我们想要在这里使用的。但是，它几乎没有得到支持。

该文章还有一些关于专门加载字体的文字：

类似的东西：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

值得讨论的一点是：在获取字体时必须添加crossorigin属性，因为它们是使用匿名模式CORS获取的。是的，即使您的字体与页面的原点相同。遗憾。

将所有内容放在一起，更新后的可重现代码如下所示：

的style.css ：

/* 2MB of random character comment fluff */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html, body {
font-family: 'Open Sans';
}

的index.html ：

<!doctype html>
<html>
<head>
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<link rel="stylesheet" href="style.css">
</head>
<body>
Hello world
</body>
</html>

现在，它只适用于Chrome Canary。我指望即将推出更好的浏览器支持。

铬：

金丝雀：

预取的资源加载两次

1 个答案: