如何使用字体加载器改善页面性能

要点总结

• 使用字体加载器能显着提升网页性能，因为它能控制网页字体的加载时机和方式，从而缩短页面加载时间，并避免“未样式文本闪烁”（FOUT）现象。
• webfontloader JavaScript 库是一个非常有用的工具，它可以在页面加载完成后后台加载来自各种来源的字体，并允许使用 CSS 和 JavaScript 回调函数来自定义加载过程。
• 必须平衡字体使用和用户体验；虽然字体可以增强网站的美感，但加载大量或多种字体会减慢页面加载速度，尤其是在移动设备上。因此，使用字体加载器和实现备用字体可以帮助保持流畅快速的用户体验。

特别感谢 Jason Pamental 提供的灵感，促成这篇文章的撰写。否则我可能永远不会考虑这个问题！ 你上次在网页中使用 Arial、Times New Roman、Helvetica 或……（不寒而栗）…… Comic Sans 是什么时候？网页字体出现得太晚了，但一旦出现，我们就再也没有回头。字体很有趣，（通常）免费且易于实现：

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

然后你可以在你的页面中使用该字体，例如：

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

字体在移动设备上也能正常工作，因此用户在你的响应式网页设计中获得良好的体验。 或者说，真的如此吗？

在图片之后，字体通常是网页中最大的资源。上面的 Ubuntu 字体会为页面增加近 250KB 的大小，这在较慢的移动网络连接上是显而易见的。 Chrome、IE、Safari 和 Opera 会在字体加载时留下空白空间，因此页面无法使用。 Firefox 和旧版本的 Opera 会显示备用字体中的文本，然后切换——这被称为未样式文本闪烁 (FOUT)。这两种情况都不理想。我们很少担心字体权重问题，并找借口，例如“这只是第一页的问题”或“许多用户已经缓存了字体”。我们可能会省略较少使用的字体；例如，删除大多数 Ubuntu 斜体样式可以节省近 40%。很少有人敢于采用使用标准操作系统字体的明显解决方案——我们的客户和设计师永远不会原谅我们。

JavaScript webfontloader

幸运的是，还有另一种选择：webfontloader。这个 JavaScript 库可以在页面加载完成后后台加载来自 Google、Typekit、Fonts.com、Fontdeck 或你自己的服务器的字体。该库本身会为页面增加另外 17KB 的大小，但它也会作为后台进程下载。要加载上面的 Ubuntu 字体集，我们创建一个名为 WebFontConfig 的全局对象，该对象定义我们的字体和设置，然后加载 webfontloader 本身：

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

因此，我们可以根据设备和带宽容量确定是否加载了部分或全部字体。理想情况下，我们可以使用网络信息 API，但浏览器支持仍然有限。或者，请注意 WebFontConfig 中的超时设置；如果字体文件需要超过两秒钟才能下载，则请求将被放弃。

CSS 回调函数

webfontloader 在操作期间会将类名应用于 html 元素：

• .wf-loading — 所有字体都已请求
• .wf-active — 所有字体都可用
• .wf-inactive — 无法加载任何字体

还会为各个字体应用类名：

• .wf-<familyname>-<fvd>-loading</fvd></familyname> — 已请求单个字体
• .wf-<familyname>-<fvd>-active</fvd></familyname> — 单个字体可用
• .wf-<familyname>-<fvd>-inactive</fvd></familyname> — 无法加载单个字体

其中 <familyname></familyname> 是字体名称的净化版本，<fvd></fvd> 是变体描述，例如 i4 代表 400 粗细的斜体。这允许我们在字体下载后切换字体——与 Firefox 的操作方式相同，例如：

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

JavaScript 回调函数

可以在 WebFontConfig 中定义类似的 JavaScript 回调函数，尽管很少有这种情况有用，例如：

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

有关更多信息，请参阅 webfontloader 文档。

最小化 FOUT

如果你的备用字体在样式、粗细或间距方面与你的网页字体有很大不同，则未样式文本闪烁会很刺眼。但是，只需进行少量实验，你就可以调整备用字体、粗细、行高和边距，以确保在加载网页字体时页面元素大致保持在相同的位置……请参阅 CodePen 上 Craig Buckler (@craigbuckler) 的文章《如何使用字体加载器》。

点击“切换字体”按钮即可查看字体切换效果。这种变化并非完全不明显，但重要的是，如果用户开始阅读，他们不会失去位置。你可以向任何页面添加“切换字体”按钮，以帮助你评估合适的备用样式：

/* 默认操作系统字体 */
body {
    font-family: arial, sans-serif;
}

/* 字体现在已加载 */
.wf-active body {
    font-family: 'Ubuntu';
}

总而言之：字体使用可能是免费的，但请尽量减少用户的成本。如果你要加载 1MB 的字体文件，那么你精心创建的响应式网页设计不适合移动设备！

(以下为FAQ部分，已根据原文进行改写和整合，并精简了部分内容)

关于使用字体加载器提升网页性能的常见问题

什么是字体加载器？为什么它对页面性能很重要？

字体加载器是一种工具，允许你控制如何在你的网站上加载网页字体。它对页面性能很重要，因为它可以帮助减少网站的加载时间。网页加载时，浏览器必须下载所有必要的资源，包括字体。如果字体很大或很多，这会减慢页面加载时间。字体加载器允许你控制这些字体的加载时间和方式，这可以显着提高你的页面性能。

字体加载器如何提高页面性能？

字体加载器通过允许你控制网页字体的加载来提高页面性能。你可以选择异步加载字体，这意味着它们不会阻塞页面的其余部分的渲染。这可以显着减少页面变得可交互所需的时间。此外，字体加载器可以帮助防止“未样式文本闪烁”（FOUT）现象，即浏览器在网页字体仍在加载时显示备用字体。

有哪些常用的字体加载器？

有几个常用的字体加载器可用，包括 Google 的 WebFont Loader 和 Typekit 的 WebFont Loader。这两个工具都提供了多种选项来控制网页字体的加载方式。还有一些 WordPress 插件（例如 Developry Google Fonts）可以轻松地在你的网站上实现字体加载。

如何在我的网站上实现字体加载器？

在你的网站上实现字体加载器通常需要向你的 HTML 添加一个脚本。此脚本将加载字体加载器，然后你可以使用字体加载器的 API 来控制网页字体的加载方式。确切的过程可能因你使用的字体加载器而异，因此最好参考文档以获取具体说明。

我可以将字体加载器与任何网页字体一起使用吗？

大多数字体加载器都兼容任何网页字体，只要字体以允许字体加载器加载的方式托管即可。这包括自托管字体和由 Google Fonts 或 Typekit 等字体服务托管的字体。

使用字体加载器会影响我的字体的外观吗？

使用字体加载器可能会影响你的字体的外观，因为它可以帮助防止 FOUT。但是，它不应该改变字体的实际设计或样式。如果在实现字体加载器后注意到字体的外观有任何变化，则可能是由于配置问题。

什么是“未样式文本闪烁”（FOUT）？字体加载器如何防止它？

FOUT 是一种现象，即浏览器在网页字体仍在加载时显示备用字体。这可能会导致短暂的文本闪烁，字体与最终字体不同，这可能会让用户感到不适。字体加载器通过允许你控制何时将网页字体应用于文本来防止 FOUT。例如，你可以选择隐藏文本，直到网页字体加载完毕，或者你可以显示备用字体中的文本，然后在网页字体加载完毕后将其替换。

字体加载器可以改善我的网站的 SEO 吗？

是的，字体加载器可以通过减少页面加载时间来改善你的网站的 SEO。页面加载时间是搜索引擎在对网站进行排名时考虑的一个因素，因此你可以采取任何措施来减少它，这可能会改善你的 SEO。

使用字体加载器有什么缺点吗？

使用字体加载器的一个潜在缺点是它可能会增加网站代码的复杂性。但是，改进的页面性能和用户体验的好处通常超过了这个缺点。此外，许多字体加载器都有良好的文档记录和支持，因此相对易于实现。

如何判断字体加载器是否正在提高我的页面性能？

你可以在实现字体加载器之前和之后使用各种工具来衡量你的页面性能。这些工具可以提供页面加载时间、首次绘制时间和可交互时间等指标，这可以帮助你量化字体加载器的影响。一些常用的性能测量工具包括 Google 的 Lighthouse 和 WebPageTest。

以上是如何使用字体加载器改善页面性能的详细内容。更多信息请关注PHP中文网其他相关文章！