html – 如何在页面加载时加载诸如字体awesome之类的Web字体？

概述此问题适用于主页上不需要Web字体且最初位于div设置为display：none; 我有一个网页,通过点击加载一个隐藏的表格,这个表格使用网络字体.我的问题是,当用户点击显示表单时会有一秒钟的延迟,因为就在那时Chrome会下载woff2文件. 这对用户体验来说并不是很好. 我需要预加载webfont,因为我没有使用主页上的字体,所以没有什么可以让Chrome在用户点击显示隐藏表单之前获取woff 此问题适用于主页上不需要Web字体且最初位于div设置为display：none;

我有一个网页,通过点击加载一个隐藏的表格,这个表格使用网络字体.我的问题是,当用户点击显示表单时会有一秒钟的延迟,因为就在那时Chrome会下载woff2文件.

这对用户体验来说并不是很好.

我需要预加载webFont,因为我没有使用主页上的字体,所以没有什么可以让Chrome在用户点击显示隐藏表单之前获取woff2文件.

我注意到,如果您在服务器上托管Font Awesome或使用CDN,这无关紧要.

我在互联网上环顾四周看看可以做些什么,我尝试了以下所有内容并且没有任何帮助,没有任何因素导致woff2文件在页面加载时加载,它只在网页主动需要字体时加载.

尝试1：预加载

<link rel="preload" href="form/font-awesome-4.5.0/Fonts/Fontawesome-webFont.woff2">@H_403_15@  
要么
    
<link rel="preload" href="form/font-awesome-4.5.0/Fonts/Fontawesome-webFont.woff2" as="Font">@H_403_15@  
尝试2：预取
    
<link rel="prefetch" href="form/font-awesome-4.5.0/Fonts/Fontawesome-webFont.woff2">@H_403_15@  
尝试3：CSS
    
@Font-face {    Font-family: 'Font-Awesome';    src: url('form/font-awesome-4.5.0/Fonts/Fontawesome-webFont.woff2') format("woff2");;}@H_403_15@  
当我环顾四周时,我开始看到基于JavaScript的加载可能的解决方案,我真的不想接近,所以我的选择是什么？
解决方法 我最终得到了这个简单的解决方案,它还没有经过Chrome以外的测试,但它对我的用例来说非常基本,我无法想象它不适用于任何现代浏览器.    
我决定通过将字体加载到我的主页面来强制加载woff2文件,但确保用户无法看到它.
  
正如我已经发现的,Chrome不会获取任何设置为display：none的div所需的资源.
  
所以这是我的解决方案.
  
CSS
    
.div-fake-hIDden {    wIDth:0px;    height:0px;    overflow:hidden;}@H_403_15@  
HTML
    
<!-- This fake div hIDden preloads our web Font! --><div ><i ></i></div>@H_403_15@  
现在浏览器在页面加载时加载woff2资源,这样当我的用户单击按钮以显示隐藏的表单时,Web字体立即加载.
                  总结       
以上是内存溢出为你收集整理的html – 如何在页面加载时加载诸如字体awesome之类的Web字体？全部内容，希望文章能够帮你解决html – 如何在页面加载时加载诸如字体awesome之类的Web字体？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://www.54852.com/web/1126956.html