HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 预加载的资源加载两次大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用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上加载了两次.我没有尝试过其他浏览器.

我做错了什么吗?

解决方法

这是预取的错误用法.查看资源: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

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

文章还有一些关于加载字体的话:

所有这些组合在一起,更新的可重现代码如下所示:

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.我指望即将推出更好的浏览器支持.

铬:

加纳利:

大佬总结

以上是大佬教程为你收集整理的html – 预加载的资源加载两次全部内容,希望文章能够帮你解决html – 预加载的资源加载两次所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。