🕴🏾 🏺 🤳 关于可变字体对Web项目性能的积极影响 👵🏻 📏 🏫

在考虑Web字体及其对网站性能的影响时，他们通常会注意以下三个指标：

下载字体文件的请求数。
字体文件的大小。
直到第一页呈现的时间。

我想知道可变字体的使用如何影响这些指标。因此，我将它们与常规字体进行了比较。那就是我所做的。

减少下载字体文件的请求数

有几种方法可以减少字体下载请求的数量。例如，这是使用CDN进行缓存，从而减少了所使用字体的变体数量。在这里，我不会谈论使用CDN或缓存，因为通常来说，使用常规字体和使用可变字体时，这是同一件事。相反，我将讨论减少字体样式选项的数量。

在标准字体世界中，减少使用的字体选项的数量会减少字体下载请求的数量。发生这种情况是因为使用更少的样式意味着需要更少的字体文件。通常，为此，您需要计划字体选择，并在设计和性能之间找到平衡，确定更有吸引力和“沉重”的设计是否值得对其性能产生影响。

由于可变字体能够在一个文件中存储不同的字体选项，因此使用可变字体意味着减少了下载字体文件的请求数量，而不必与设计人员交谈以减少项目中使用的字体选项的数量。

可变字体的使用仅由于此类字体文件的设备功能而导致请求数量的减少。但是，如果文件包含有关不同字体选项的所有信息，则应询问这如何影响文件大小。

减少字体文件大小

有许多减小字体文件大小的方法。通常，此过程的第一步是选择最有效的格式来存储Web字体。例如-WOFF2。

reference寻找参考点

我对各种字体文件的大小进行了研究。特别是，使用Adobe的Source Sans Pro字体。我选择这种特殊字体是因为它的代码托管在GitHub上，并且因为它是开源的。

比较Source Sans Pro字体的OTF文件的大小-一个存储一个饱和度字体的文件和一个存储可变字体的文件。

作为参考，我采用了一个描述Source Sans Pro标准版本的饱和度字体的文件。 OTF格式的大小为248 Kb。可变字体OTF文件的大小为405 Kb。这意味着可变字体的文件大小比包含标准Source Sans Pro一个版本的文件大小大73％。

但是考虑到可变字体文件包含具有任何饱和度的字体变体所需的所有信息的事实，一组功能相似的常规字体文件的大小约为1170 Kb。

这几乎是可变字体文件大小的3倍。

即使您需要普通和粗体饱和度选项中的某种字体，存储这些字体选项所需的两个文件也会变成一个以上的可变字体文件。

O比较OTF和WOFF2格式

与压缩格式WOFF和WOFF2相比，OTF文件非常大。

具有一种字体选项的文件：OTF-234 Kb，WOFF2-111 Kb。可变字体文件：OTF-405 KB，WOFF2-112 KB。

如果比较不同格式的文件大小，事实证明，仅使用WOFF2格式就可以大大减小文件大小。

对于我来说，有趣的是，在存储可变字体数据时使用WOFF2格式可以节省多少费用。文件大小从405 Kb减小到112 Kb的事实导致可变字体文件的大小与仅存储标准Source Sans Pro一个版本的文件几乎相同。

事实证明，这令我感到惊讶，我绝对确信，在所有情况下都无法实现这种节省。但很高兴看到将WOFF2压缩应用于可变字体后效果如何。

using使用字体子集减少文件大小

使用标准字体时，还有另一种减小文件大小的方法。它包括使用字体的子集。例如，这使您可以摆脱不必要的字符，或减少字体字符集，仅保留显示拉丁文键入文本所需的字符。

创建字体子集会带来一些风险。使用子集可能会导致文本的某些部分使用后备字体显示。如果从使用的字体中意外删除了必要的字符，则会发生这种情况。

您可以使用特殊工具（例如glyphhanger）创建字体的子集。特别是，已经为此工具准备了有关GitHub的良好指南。它适用于标准字体和可变字体。

我使用glyphhanger处理了Source Sans Pro的标准版本和可变版本，并选择了小写和大写拉丁字符，以及数字和特殊字符（例如感叹号）。

使用字体的子集来减小文件的大小

此操作使我们可以将包含一种饱和度的字体的文件的大小从111 Kb减小到16 Kb（节省85％是非常好的）。对于可变字体，文件大小从112 Kb减少到27 Kb（75％的节省程度是可以接受的）。

这些结果再次使我感到惊讶。我期望可变字体文件更大。考虑到在典型情况下它们使用相同的正常和粗体饱和度字体，因此事实证明27 KB的可变字体文件小于两个文件，每个文件都包含有关不同饱和度的相同字体的信息。结果，我相信这种方法可以节省很多钱。

没错，需要注意的是，此处仅介绍了我使用Source Sans Pro字体进行的实验。在其他字体上，相同的方法可能会导致其他效果不太理想的结果。使用可变字体可能不会产生相同程度的文件大小减少。因此，我建议您在使用字体子集时要格外小心。也就是说，在实践中应用这种优化技术之前，值得对所有内容进行良好的测试，评估，并了解对特定项目最合适的方法。

regarding关于文件大小的其他注意事项

在讨论字体文件大小时，还需要考虑一些其他注意事项，即与下载多个较小的文件相比，下载一个较大的文件将花费更长的时间。

例如，当使用标准字体时，存储有关其正常饱和度类型信息的文件通常比其他文件小。结果，可以在下载相应的小文件后立即快速显示文档正文。然后，在加载字体的粗体后，您可以应用它。这种方法的优点是，与使用可变字体相比，它使您可以更快地在页面上显示文本。这里的重点是各个标准字体文件小于可变字体文件。

使用可变字体时，您需要等待加载单个大文件后才能显示文本。这会增加准备工作页面所需的时间。但是，需要在显示文本之前等待所有字体数据，这可以避免逐渐下载的字体影响已经显示的文本的问题。另外，由于使用可变字体时会同时加载所有类型的字体，因此我们不必每次加载新版本的字体时都强制浏览器重新绘制页面。

结果，关于字体文件的大小，可以根据使用可变字体得出的结论取决于具体情况。即-从项目的功能，从设计要求，从使用的字体。

减少第一次渲染的时间

现在让我们谈谈减少首页渲染之前的时间。这段时间越短，性能越好。这是很明显的。此外，必须牢记的是，如前所述，唯一的大型可变字体文件的加载速度可能比几个小型字体文件的加载速度慢。但是即使页面输出稍有延迟，唯一的“不可见文本刷新”（Invisible Text Flash，FOIT）也可能导致用户感觉页面加载速度比实际情况要慢。因此，我认为，我们不应将页面暴露于FOIT风险中，而应尝试将此问题限制为所谓的“无样式文本闪烁”（FOUT）。

▍FOIT

这就是FOIT的样子。

当我们阻止或延迟文本的输出，直到加载所需的字体时，就会出现 FOIT “不可见文本的闪烁”的视觉表现示例。因此，在加载字体之前，页面将显示为空白。

▍FOUT

这是FOUT的示例。

如果首先使用备用字体显示文本，然后在需要的字体可用时将其切换为 FOUT或替换以前使用的字体，则将出现 FOUT “非样式化文本的闪烁”的视觉表现示例。

我相信最好是用户遇到FOUT，而不是无法阅读页面内容。因此，最好的是，一方面，我们设想一个开发场景，使FOUT出现在用户面前，另一方面，我们试图使它尽可能少地影响项目的可用性。

在项目中实现FOUT机制的最简单方法是使用font-display带有值的属性swap。这将允许使用字体集中描述的后备字体显示文本。然后，加载所需的字体后，它将替换备份字体。该属性font-display可以采用其他值，我建议您检查它们，但要实现文本的FOUT行为，该值swap是一个很好的起点。

font-display: swap;

FOUT的问题之一是，替换字体时，您经常会在页面上看到重新排列的文本，以使内容适应其“测量”参数与先前使用的字体参数不同的字体。

使用标准字体时，我们可以修改诸如的属性line-height，font-size并letter-spacing通过这样做来使文本适应替换字体并减少在此过程中发生的内容偏移。您可以使用出色的字体样式匹配器工具来执行此操作。它是由莫妮卡·丁库勒斯库（Monica Dinkulescu）创建的，他的灵感来自海伦·福尔摩斯（Helen Holmes）的这篇出色文章（认真地讲-很棒的文章-我建议阅读）。

我希望随着时间的推移，可变字体将对操作系统有更广泛的支持。这将使您可以通过使用系统变量字体作为备份来简化布局更改。

后备可变字体

想象一下，如果我们拥有支持控制其饱和度，宽度和光学尺寸的系统字体，将会发生什么。这将允许修改此类字体的属性，使其适合我们使用的特殊字体的特性。如果将其与设置属性（例如line-height或）的现有方法结合使用font-size，这将使我们有机会在两种字体之间创建几乎无法察觉的过渡。这意味着用户将体验不到FOUT的明显表现，并且由于更改字体时布局上的较小更改，浏览器在重新绘制页面上的工作将减少。

那太好了，我希望如此。

摘要

使用可变字体会减小浏览器下载的字体数据的整体大小。使用可变字体代替页面上通常使用的字体这一事实自动意味着，为了准备输出页面，您将必须执行更少的请求。

即使您对可变字体的文件大小看似很大，也请注意，使用此类字体可以应用其他优化技术。即，我们正在谈论诸如WOFF2之类的高级字体格式，关于字体子集的形成，关于使用property font-display: swap。所有这些表明，使用可变字体，我们可以减少字体数据，并显着提高样式页面的能力。

如果我们能够应对一些现有的性能挑战，那么这将使我们更加关注设计。也就是说，您不再需要在设计和页面性能之间寻求折衷。

在使用可变字体的领域，我们有机会了解该技术如何通过与我们的项目合作来帮助创造更积极的用户体验。由于使用可变字体意味着可以使用许多字体选项，因此我们可以创建可以灵活地适应用于其的设备功能的项目。这使您可以创建可访问且可读的文本，而不必担心以下事实：其他常规字体文件将严重影响确保页面正常运行所需的数据大小。

亲爱的读者们！您在项目中使用可变字体吗？

关于可变字体对Web项目性能的积极影响