<!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上加载了两次.我没有尝试过其他浏览器.
我做错了什么吗？
解决方法
<link rel="prefetch">is a directive that tells a browser to fetch a resource that will probably be needed for the next navigation.
…
<link rel="subresource">was originally planned to tackle the current navigation,but it Failed to do that in some spectacular ways.
…
The basic way you could use
preloadis to load late-discovered resources early. […] Some of the resources are hidden in CSS and in JavaScript
所以,preload是我们想要在这里使用的.但是,它几乎没有得到支持.
文章还有一些关于加载字体的话：
Something like:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>One point worth going over: You have to add a crossorigin attribute when fetching fonts,as they are fetched using anonymous mode CORS. Yes,even if your fonts are on the same origin as the page. Sorry.
将所有这些组合在一起,更新的可重现代码如下所示：
style.css中：
/* 2MB of random character comment fluff */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'),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.我指望即将推出更好的浏览器支持.
铬：
加纳利：
