如何在页面加载时加载 Web 字体，例如 Font Awesome？

Question

这个问题适用于网页字体不需要在主页面上，而是最初在设置为display:none;的div中的情况。

我的网页通过JavaScript点击加载隐藏表单，并且该表单使用web字体。我有一个问题，就是当用户点击展示表单时，会有一秒钟的延迟，因为此时Chrome正在下载woff2文件。

这对用户体验来说并不好。

由于我在主页面上没有使用该字体，所以我需要预加载web字体，这样就没有任何东西能够促使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">

尝试三：CSS

@font-face {
    font-family: 'Font-Awesome';
    src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");;
}

当我四处寻找解决方案时，我开始看到了一些基于Javascript的加载可能的解决方案，这是我真的不想接近的东西，那么我的选择是什么？

- Joseph

---

你在测试哪个浏览器？ - MoralCode

Chrome 版本 47.0.2526.111 m - Joseph

Answer 1

我最终得到了这个简单的解决方案，它没有在除Chrome之外的其他浏览器上进行测试，但对于我的用例来说相当基本，我无法想象它不适用于任何现代浏览器。

我决定通过在主页面加载字体来强制加载woff2文件，但确保用户看不到它。

正如我已经发现的那样，Chrome不会获取由设置为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 字体将立即加载。

- Joseph

---

已在最新版本的Firefox和Edge上进行了测试。同样适用于它们两个。 - Markus T.

也在 Firefox 71.0 (64 位元) 上工作，感謝 Hackerman！@Joseph - lomelisan

Answer 2

你不需要使用隐藏的div来让你的字体生效。只要你使用支持的浏览器（从w3schools获取的图片），css的@font-face规则应该可以正常工作。

您还可以按照以下方式添加更多的字体格式：

@font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"),
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype');
}

- MoralCode

---

我可以看到那里写着Chrome应该可以工作，但在我的测试中它不会预加载woff2文件。 - Joseph

你是否真的在隐藏的 div 外部使用了网页中的字体？ - MoralCode

是的，但只有在用户按下提交按钮时显示的隐藏表单上，然后jQuery从第二个表单中删除我的“div-hidden”类，我正在使用Font Awesome。这就是我的问题，直到我取消隐藏表单（我正在使用Font Awesome来勾选框），才需要Font Awesome。虽然它们都在同一页上，但Chrome不会加载“woff2”文件，直到我的jQuery取消隐藏表单。这导致非常难看的延迟。但是，没有页面重新加载，所有操作都在同一页上完成。 - Joseph

或者你可以让隐藏的内容一开始显示，然后在0.5秒后再隐藏。这样，用户打开表单之前字体就可以开始加载了... - MoralCode

是的，我按照上面的方式（尝试3）将它添加到我的CSS中，这完全是在页面加载时加载的。但是Chrome拒绝获取woff2文件，直到表单被取消隐藏。我可能会在Firefox中尝试@font-face，看看是否可以在那里工作。 - Joseph

Answer 3

您可以尝试使用Web Font Loader：https://github.com/typekit/webfontloader

Web Font Loader通过@font-face提供了对链接字体的额外控制。它提供了一个通用的接口来加载字体，无论来源如何，然后添加了一组标准事件，您可以使用这些事件来控制加载体验。Web Font Loader能够从Google Fonts、Typekit、Fonts.com和Fontdeck以及自托管的Web字体中加载字体。它是由Google和Typekit共同开发的。

- Oscar