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

Question

此问题适用于主页上不需要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的加载可能的解决方案,我真的不想接近,所以我的选择是什么？

Answer 1

我最终得到了这个简单的解决方案,它还没有经过Chrome以外的测试,但它对我的用例来说非常基本,我无法想象它不适用于任何现代浏览器.

我决定woff2通过将字体加载到我的主页面来强制加载文件,但确保用户无法看到它.

正如我已经发现的,Chrome不会获取任何div设置所需的资源display:none;

所以这是我的解决方案.

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字体立即加载.