「译文」网页字体性能探讨-你的字体是如何影响网页速度的

本文翻译自Web Font Performance - How Your Fonts Affect Page Speed

对于我们大多数设计师来说，字体排版在网页设计里和其他决定性元素一样都是很重要的。挑到完美的字体，选择合适的字重去展现，这都是我们的头等大事。我们希望字体能作为设计的一项拓展，能使我们的内容引人注目，从而引起读者用户的兴趣。但是它对于网页性能的影响究竟是怎么样的呢？

比较糟糕的一点是，我们使用第三方下载的网页字体时通常不会考虑太多性能加载的问题。你的网页用户可能会经历很慢的加载时间或者更糟糕的「无样式文本闪烁」，出于以上的原因，考虑网页字体对性能的影响应该成我们设计时的一种习惯。

莫慌，我们接下来会先通过一系列的探讨供你判断是否要使用自定义字体。如果你确信自定义字体对于你的网站来说是必要的，我们也会探讨适当的优化和具体措施。

自定义网页字体 vs. 系统自带字体

在我们探讨如何挑选正确的网页字体以及确保它不影响网站加载的问题之前，我们首先要问问自己一个问题：我真的需要在网页上使用自定义网页字体吗？还是系统自带的字体已经能够满足我们的需求了？

David Gilbertson以及Hackermoon的人员就曾对此写了一份很棒的文章和流程图 来帮助你决定是否真的需要使用自定义网页字体。简单地概括就是，如果这个网页字体并不能简洁明了地表达你的品牌或者让你的网站内容阅读体验提升，你基本上是不需要使用它的。

使用系统字体的好处就是，它们本身就已经是大多数设备自带的。这就意味着当你的用户浏览你的网站的时候，并不需要额外去下载字体。在你网站加载的时候这一点就能节省带宽。以下是我们列出来的大多数系统都自带的字体（注意这不是最详细的清单）。除此之外，这些字体的优质可读性和高质量也是它们在印刷中大量使用的原因。

安全使用的网页字体（系统自带字体）

• Arial

• Calibri

• Helvetica

• Verdana

• Courier

• Palatino

• Times New Roman

最重要的是，你需要弄清使用自定义字体的原因是什么。如果改用系统自带的字体，你的网站访客会注意到区别吗？实际上很有可能当你对某个自定义字体和与其相似的系统字体比较时，你也很难看出差异。大多数时候我们想用自定义字体而不是系统字体，仅仅是因为我们可以替换。

不同的字体文件类型 - TTF, WOFF, WOFF2, SVG.

如果你确信你的网站需要用到特殊的网页字体，你可能会对下载字体时所遇到的各种各样的文件类型感到困惑。你可能已经下载过TTF, WOFF, WOFF2, SVG 或者其他的一些字体文件。令人遗憾的是，并没有一种字体文件类型可以支持所有的浏览器，但是我们可以采用迂回的方法，提供后备选项以达到尽量覆盖所有情况。

TTF - 尽管几乎所有的浏览器都能兼容它，但是真源字体（True Type Font）没有经过压缩，因此一般情况下都具有较大的文件大小。正因为此它不能算得上是一个好选择。

SVG - 可缩放图形矢量（Scalable Vector Graphics）字体基本上可以忽略掉。这种类型充满了bug，除了Safari外所有的浏览器都已不再兼容它，并且在唯一支持它的Safari上也不算得上最好的字体选择。（注意不要SVG图像弄混淆，SVG图像可是当下非常流行并且大部分浏览器都兼容支持的）

WOFF - 这就是我们要重点说的。网页开放字体格式（Web Open Font Format）是Opera/Microsoft/Mozilla三家合作开发的产品，并且是万维网联盟推荐使用的字体格式。它提供了压缩功能，并且被98%的浏览器所支持兼容。在大多数情况下，WOFF是你提供给网站访客的字体后备选项。那么问题来了，为什么它是后备选项而不是首选呢？

WOFF2 - 这就是以上问题的答案。WOFF2是WOFF格式的下一代升级版，它比上一代WOFF能具有多压缩多30%的优势。一直以来它都不是广泛被兼容和支持的，只有94%的浏览器支持它，然而实际上只有IE和Opera Mini这两个浏览器不支持。为了获得更好的加载性能，还是尽量使用这个格式。

使用谷歌字体接口

谷歌字体接口是一项网络服务，它可以支持提供开源字体文件以供你的网页设计使用。我们可以通过https://fonts.google.com/的链接来轻松访问这个至今为止还在不断增加的字体集服务。如果你觉得上述提到的方法比较繁琐，那么谷歌字体接口是一个很棒的选择，它可以帮你处理这些繁琐的工作。

在谷歌字体接口服务中，选择完字体之后，你就可以自定义字体的字重，只选择你需要用到的字重。谷歌甚至在右上角提供了方便的加载指示器，可以让你了解你选择的字重对网页字体加载的影响。

谷歌字体接口让使用@font-face引用字体的CSS编程变得非常简捷。另外值得一提的是，它也可以提供大量的字体后备选项给你，这样你就不用考虑浏览器的兼容性问题。

图标字体 vs. 小图片

说完了字体，那图标呢？对于图标，我们什么时候使用图标字体（类似fontawesome 的服务），什么时候又该使用图标图片就好呢？

出于对网页性能的考虑，以上问题的答案是需要看实际情况。通常来说，如果你仅仅是需要展示一两个图标（比如 点赞和 踩），你只需要使用图片就行，因为这样可以减少加载带宽。然而，如果你是通篇使用了很多图标，那么图标字体对你来说更有效。你可以亲自找例子试试就会体会到他们的区别---你可能会发现图标字体比图标图片更加紧凑。这两者是完全不同的，要想真正理解你应该都两个选项都试试。

如果你还是犹豫不决，或者这两种方式在性能上的表现是十分接近的，不妨只从视觉美学层面考虑。如果你需要的是一个颜色丰富多彩的图标，那么你最好使用图标图片，因为图标字体只有单色。不管什么浏览器图标图片都能达到稳定的展示效果。假设你曾经用过Font Awesome服务，却看到你的图标并没有正常显示，只看到了一个方块（或者空白），那么你已经知道了没有正确设置服务所造成的后果。

另一方面讲，图标字体用简单CSS代码就可以调整大小和更换颜色，并且也不会出现分辨率方面的问题。无论设备/屏幕尺寸/像素密度如何，使用图标字体可以让字体看起来很棒。图标字体也可以做缓存来提升网页加载时间。

网页字体性能提示

这篇文章的目的并不是劝说人们不应该使用网页字体。无论是网页字体还是自带字体，总是有一种正确的方法可以解决问题。将网页性能的考虑谨记于心，你会减轻很多压力。

网页字体会造成加载缓慢并且「无样式文本闪烁（FOUT）」的原因，往往是浏览器在加载完HTML框架和CSS样式之后才加载字体文件。这种流程显然不够理想。

然而，我们只要使用rel=preload的方法，就可以告诉浏览器需要马上下载字体文件进行加载。这样的流程应该是像以下图片这种的。

这样看起来就好多了。预加载现在已经有85%的浏览器是支持的，所以它并不是完全通用的一种解决方式。然而我们还是有其他的解决方法的。你可以使用FontFace接口，它提供了更高的兼容性，兼容性的支持甚至比我们之前讨论的WOFF2兼容支持还要好。

总结

我们的重点并不是不应该使用自定义网页字体。相反，更为重要的是弄清使用自定义字体的原因。如果使用自定义网页字体对你的品牌来说不怎么重要，也没有其他的目的，那么系统自带字体会是更好的选择。

如果你确实使用了第三方的自定义字体，你需要遵循上面提到的简单步骤来确保自定义字体不会严重拖累你的网页性能。之后你就可以发挥你自定义的优雅字体的优势啦，给你的网站访客一个美观而高效的体验吧！

本篇文章转载翻译自MachMetrics的播客文章Web Font Performance – How Your Fonts Affect Page Speed。若翻译出现错误或者不到位，请您在评论或私信里斧正。

参考

1. ^截至2020.12该比例已经上升至98%