如何在页面加载时加载网页字体，例如 font awesome？

Question

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

的 div 中的情况

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

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

我需要预加载网络字体，因为我没有使用主页上的字体，所以没有什么可以导致 Chrome 在用户点击显示之前获取 woff2 文件隐藏表格。

我注意到，如果您在服务器上托管 Font Awesome 或使用 CDN，这并不重要。

我在互联网上四处查看，看看可以做什么，我尝试了下面的所有方法，none 有帮助，没有导致 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 不会获取设置为 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 资源，这样当我的用户单击按钮以显示隐藏表单时，网络字体会立即加载。

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 字体加载器：https://github.com/typekit/webfontloader

Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.

如何在页面加载时加载网页字体，例如 font awesome？

How can I load a web font such as font awesome on page load?

html

css

webfonts

font-awesome