html – 如何在页面加载时加载诸如字体awesome之类的Web字体？
发布时间：2020-12-14 23:22:34 所属栏目：资源 来源：网络整理
导读：此问题适用于主页上不需要Web字体且最初位于div设置为display：none; 我有一个网页,通过点击加载一个隐藏的表格,这个表格使用网络字体.我的问题是,当用户点击显示表单时会有一秒钟的延迟,因为就在那时Chrome会下载woff2文件. 这对用户体验来说并不是很好. 我
|
此问题适用于主页上不需要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"> 要么 <link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font"> 尝试2：预取 <link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 尝试3：CSS @font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");;
}
当我环顾四周时,我开始看到基于Javascript的加载可能的解决方案,我真的不想接近,所以我的选择是什么？ 解决方法
我最终得到了这个简单的解决方案,它还没有经过Chrome以外的测试,但它对我的用例来说非常基本,我无法想象它不适用于任何现代浏览器.
我决定通过将字体加载到我的主页面来强制加载woff2文件,但确保用户无法看到它. 正如我已经发现的,Chrome不会获取任何设置为display：none的div所需的资源. 所以这是我的解决方案. CSS .div-fake-hidden {
width:0px;
height:0px;
overflow:hidden;
}
HTML <!-- This fake div hidden preloads our web font! --> <div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div> 现在浏览器在页面加载时加载woff2资源,这样当我的用户单击按钮以显示隐藏的表单时,Web字体立即加载. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |