速度提高Web字体的五个步骤

微调您的字体文件并优化您的加载策略以获得最大速度+最小效果

在我以前的帖子中，我写了关于系统字体及其在Web字体上的优势。我鼓励一个“系统字体首先”方法，争论与系统字体相比，Web字体（A）可以产生负面影响性能，（b）使用更多数据，并且（c）增加您的网站的能耗。但是没有网络字体的网络将是一个更不趣的一个 - 也许通过使用Web Fonts更负责任地获得所有的好处，同时最大限度地减少缺点。

在本指南的第一个中，我将介绍五种方法，以改善我认为最少的努力最大的收益。

信用进入Zach LeaTherman，他们在他的网站上写下了关于Web Fonts的长度。他所有的文章都值得阅读，特别是字体加载清单和字体加载策略的全面指南（这确实非常全面），这两者都在我将这篇文章放在一起时非常有用。

Web Open字体格式2.0（）是在编写时，Web字体的最小和最有效的文件格式。在您使用@ Font-Face at-true时，请确保在较旧的，效率低，诸如此类的文件格式之前出现字体。浏览器将在它理解的列表中使用第一个字体，即使它是一个更大的文件。

除非您需要支持IE8，否则您不需要以外的任何东西。如果您不需要支持IE11，则只需要。

如果您只有文件（例如，如果您从Google字体下载字体），则需要使用在线字体转换器等工具转换它。如果您没有使用完全开源许可证的字体，请首先检查许可证是否允许此操作。

当您开始浏览到字体加载策略时，您将看到很多缩写权：

闪存的隐形文本（）是在浏览器下载Web字体之前文本不可见的时间段。

Unstyled Text（）的闪存是在浏览器下载Web字体之前在后退字体中呈现文本的时间段。

这些都不是理想的，但如果您使用的是Web字体，其中一个可能会在用户访问您的网站时可能会发生（希望通过第二页加载，浏览器将能够提供字体它的缓存）。如果我们从前从前拍摄的字体面，请添加字体显示描述符，我们可以告诉浏览器我们愿意的浏览器。

字体显示有五种可能的值：第一个，auto是浏览器的默认行为（大多数浏览器青睐）。以下是另外四个：

Swap告诉浏览器我们希望它使用后退字体显示文本，直到加载Web字体（即我们更喜欢a）。一旦装载字体，这需要5秒或5分钟，它将被交换。这是一个很好的基础，因为它让网站访问者立即开始阅读您的内容，但请务必选择类似的回力（我们' LL覆盖本系列中的第二部分）中的回退，以防止在字体交换时的大布局偏移。

如果我们宁愿浏览器隐藏文本，直到加载Web字体（即我们而来），我们可以使用字体显示：块。文本永远不会保持不可见：如果字体在某个时段内加载（通常是三秒钟），则浏览器将使用后退字体，一旦加载，就会在Web字体中交换。

如果这似乎是您喜欢最好的选择，因为您认为看起来很糟糕，请记住，当文本是不可见的时，您的页面无法使用，您的内容不可读取。

它以令人难以置信的小（〜100ms）＆＃39开始;块＆＃39;隐藏文本的时间，之后它显示了回归字体。

如果Web字体在短时间内没有加载（〜3s），则后退字体将用于页面的其余部分。

如果您没有讨论用户第一次访问您的网站（机会，他们不是那么迷惑自己），则回归是一个不错的选择。

可选类似于回退，但它给出了最短的时间（〜100ms）加载的字体，之后不会交换。但是，它确实有一个附加功能，它允许浏览器决定如果连接太慢，则为要加载的速度太慢，则浏览器可以决定中止字体请求。

要最大限度地减少此期间，我们希望尽快加载我们的Web字体文件。使用＆lt;链接rel =＆＃34;预加载＆＃34;＆gt;在我们的＆lt; head＆gt;，我们可以告诉浏览器早些时候开始获取我们的字体。将以下标记添加到您的顶部＆lt;头部＆gt; （之前），将href属性设置为字体文件：

通过添加此标记，我们会告诉浏览器立即开始加载我们的字体文件，而通常它不会开始，直到它找到对您的特定字体的引用并找到使用它的元素。

浏览器通常智能足以仅在当前页面上需要下载字体。使用预加载覆盖此行为，迫使浏览器下载字体即使它不使用。出于这个原因，只需预先加载每个字体的单一格式（如果您拥有它）。

您预加载的字体越多，您可以从这种技术获得的较少，因此优先考虑显示在折叠之上'的字体（用户看到的第一个100VH而不滚动）。

您可以通过Yoav Weiss在本文中阅读更多关于预装的信息：预加载：什么是好的？

通过子集字体，我们可以生成一个新的较小字体文件，该文件仅包括我们所需要的字形（字形是一个单独的字符或符号）。我在所有字体上使用字体子遗料工具子集在本网站上的标题中用于标题的字体，空间Grotesk粗体，只包含“基本拉丁语”范围中的字符。这将文件大小从30kb减少到仅为7kb。

子集是一个强大的工具，但它确实带有一些潜在的缺点。如果您正在构建一个显示用户生成的内容的网站，人们的名字或地点名称，您应该考虑除26标准字母，10个数字和少数英语写作中常见的字符之外的字符。

至少，您应该考虑变形物：在一个字符上方或下方改变发音的字形。这些是语言中的常见，包括法语，西班牙语，越南语，以及来自希腊语或希伯来语等字母的音译（或“罗马化”）文本;他们也出现在借词（来自另一种语言的单词）。

如果您太积极地分组，您甚至可以在同一个字中最终结束字体。

幸运的是，您不必手动检查您网站上的每个页面以获取不同的字形。 glyphanger是一个命令行工具，这是两件事：首先，它看起来，看看你的网页并确定所用的Unicode字符范围（这些范围对应于脚本或语言。例如，“基本拉丁语”，'西里尔'，'泰语'） ;其次，它将字体文件集成，输出仅包含指定范围中字符的新版本。

使用Glyphanger开始（您需要Python和Pip）可能有点棘手（您需要Python和Pip） - Sara Soueidan的解释了她如何在这里完成它：如何在摩托车上设置Glyphanger以优化和转换Web的字体文件。

这不是一个普遍的规则，如这里的大多数点。您可能希望使用像Google字体或Adobe字体等托管服务的原因有两个好的原因：

它们通常是在Web上使用某些字体的最便宜或唯一的法律方式：如果您别无选择，只能使用其中一个服务，找出它是否支持子集或添加字体显示描述符。

它们是方便：将一行中的一行复制和粘贴到您的网站的＆lt; head＆gt;将速度快于替代方案：下载字体文件，转换和子集字体文件，然后在每种重量和样式编写@ Font-Face at-true。

如果您仍然纯粹是因为方便而使用谷歌字体，请查看Google-Webfonts-Helper。此工具允许您从完整的Google字体集中构建自定义Web字体捆绑包，定义所需的权重和字符集，然后为您提供包含所需的所有和字体文件（以最新格式）的单一下载。

以下是不使用托管服务和自主主机的最佳理由的列表，而不是：

域名查找需要时间;您可以使用Preconnonnect资源提示来缓解此问题，但将始终会有用于打开与新域的连接的性能损失。这可能是为什么谷歌自己的网站（包括web.dev）现在使用自主托管字体而不是谷歌字体。

像Adobe字体等支付Web字体服务需要检测页面视图以获取计费目的，但它们可能收集比严格必需的更多数据。如果您选择了选择，请使用（＆lt;链接rel＆＃34; stylesheet＆＃34;＆gt;）加载您的字体，而不是JavaScript（＆lt; script＆gt;），以最小化第三方的数据量能够收集您的用户。

谷歌字体似乎没有在网站访问者超出IP地址和用户代理字符串的访问者上收集很多，但谷歌通过为免费提供服务而不是完全无私的。使用Google字体的五十万亿[3]页面视图中的每一个都是一个数据点，如果网站选择使用自托管字体，则Google将没有。

使用自托管字体，您可以完全控制您加载字体的终极控制，允许您为自定义子集提供服务，定义字体显示设置，并指定浏览器应该缓存字体文件的长度。

第三方服务可以完全遭受放缓，中断或关闭。只要您的网站即将到来，您的字体就会提供时，您的字体将可用。

这些步骤中的每一个都可以自己有益，但一起使用可能导致大改善。如果您决定在本文中介绍的一些步骤中，请尝试使用灯塔或网页测试等工具进行更改后，从而查看每个单独的更改的效果。

在第二部分中，我们将介绍一些更高级的技术，包括JavaScript字体加载策略和可变字体。我们还将看到选择正确的后备字体并介绍新的首字母缩略词 - ，FAUX文本的闪光。