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

Question

此问题适用于主页上不需要网络字体且最初位于div设置为display:none;

的情况

我有一个网页，在点击时通过Javascript加载隐藏的表单，此表单使用网络字体。我的问题是，当用户点击以显示表单时会有一秒钟的延迟，因为当时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字体。

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');
}

Answer 3

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

  

通过@ font-face使用链接字体时，Web Font Loader可为您提供更多控制。它提供了加载字体的通用接口，无论源是什么，然后添加一组标准事件，您可以使用它们来控制加载体验。 Web Font Loader能够加载来自Google Fonts，Typekit，Fonts.com和Fontdeck的字体，以及自托管的Web字体。它由Google和Typekit共同开发。