字体最佳实践

针对核心 Web 指标优化 Web 字体。

Katie Hempenius
Katie Hempenius
X
Barry Pollard

本文介绍了字体的性能最佳做法。网络字体通过多种方式影响性能：

本文分为以下三个部分：字体加载、字体提交和字体渲染。每个部分都介绍了字体生命周期的特定方面如何运作，并提供了相应的最佳实践。

字体加载

字体通常是重要的资源，因为没有它们，用户可能无法查看网页内容。因此，字体加载方面的最佳实践通常侧重于确保尽早加载字体。应特别注意从第三方网站加载的字体，因为下载这些字体文件需要单独的连接设置。

如果您不确定是否及时请求了网页的字体，请查看 Chrome 开发者工具中 Network 面板中的 Timing 标签页，了解更多信息。

DevTools 中“Timing”（时间）标签页的屏幕截图

了解 @font-face

在深入了解字体加载最佳实践之前，请务必了解 @font-face 的工作原理以及这对字体加载有何影响。

@font-face 声明是使用任何 Web 字体的必要部分。该文件至少要声明用于引用字体的名称，并指明相应字体文件的位置。

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

一个常见的误解是，遇到 @font-face 声明时系统会请求字体，但事实并非如此。@font-face 声明本身不会触发字体下载。只有在页面使用的样式引用了某个字体时，系统才会下载该字体。例如：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

换句话说，在上述示例中，只有当网页包含 <h1> 元素时，才会下载 Open Sans。

因此，在考虑字体优化时，请务必将样式表与字体文件本身同等对待。更改样式表的内容或提交方式可能会对字体送达时间产生重大影响。同样，移除未使用的 CSS 和拆分样式表可以减少网页加载的字体数量。

内嵌字体声明

大多数网站都会从在主要文档的 <head> 中内嵌字体声明和其他关键样式中受益，而不是将它们包含在外部样式表中。这样一来，浏览器无需等待外部样式表下载，因此可以更快地发现字体声明。

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

内嵌关键 CSS 是一种更高级的技术，并非所有网站都能实现。性能优势显而易见，但需要额外的进程和构建工具来确保正确内嵌必需的 CSS（最好仅内嵌关键 CSS），并以非渲染阻塞的方式传送任何其他 CSS。

预先连接到关键第三方来源

如果您的网站从第三方网站加载字体，我们强烈建议您使用 preconnect 资源提示与第三方源建立早期连接。资源提示应放置在文档的 <head> 中。以下资源提示为加载字体样式表设置了连接。

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

如需预连接用于下载字体文件的连接，请添加使用 crossorigin 属性的单独 preconnect 资源提示。与样式表不同，字体文件必须通过 CORS 连接发送。

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

使用 preconnect 资源提示时，请注意字体提供程序可能会从不同的来源提供样式表和字体。例如，下面是如何为 Google Fonts 使用 preconnect 资源提示的。

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

使用 preload 加载字体时请务必谨慎

虽然 preload 非常有效地在网页加载过程中尽早发现字体，但代价是会占用浏览器加载其他资源的资源。

内联字体声明和调整样式表可能是一种更有效的方法。这些调整更接近于解决发现字体较晚的根本原因，而不仅仅是提供权宜解决方法。

此外，在使用 preload 作为字体加载策略时也应谨慎，因为它会绕过浏览器的一些内置内容协商策略。例如，preload 会忽略 unicode-range 声明，如果谨慎使用，则应仅用于加载单个字体格式。

不过，使用外部样式表时，预加载最重要的字体可能非常有效，因为否则浏览器要等到很久以后才会发现是否需要该字体。

字体提交

更快的字体提交可加快文本渲染速度。此外，如果足够早提交字体，这还有助于消除因字体交换而导致的布局偏移。

使用自托管字体

从纸面上看，使用自托管字体应该可以实现更好的效果，因为它消除了第三方连接设置。然而，在实践中，这两个选项之间的性能差异并不明显：例如，网络年历发现使用第三方字体的网站比使用第一方字体的字体的渲染速度更快。

如果您考虑使用自托管字体，请确认您的网站是否使用了内容分发网络 (CDN) 和 HTTP/2。如果不使用这些技术，自托管字体很难提供更好的性能。如需了解详情，请参阅内容传送网络。

如果您使用的是自托管字体，建议您还应用第三方字体提供商通常自动提供的一些字体文件优化，例如字体子集和 WOFF2 压缩。实施这些优化所需的工作量将在一定程度上取决于您的网站支持的语言。请务必注意，针对 CJK 语言优化字体可能特别具有挑战性。

使用 WOFF2

在所有新式字体字体中，WOFF2 是最新的字体，它的浏览器支持最广，压缩效果最好。由于使用 Brotli，WOFF2 的压缩率比 WOFF 高 30%，因此下载的数据量更少，性能也更快。

鉴于浏览器支持，专家现在建议仅使用 WOFF2：

事实上，我们认为现在也该宣告：请只使用 WOFF2，忘记所有其他格式。

这样可以极大地简化 CSS 和工作流，还可以防止意外下载重复或错误的字体。现在，所有平台都支持 WOFF2。因此，除非您需要支持真正古老的浏览器，否则就使用 WOFF2。如果无法做到这一点，请考虑完全不向这些旧版浏览器提供任何网络字体。如果您采用了稳健的回退策略，就不会出现此问题。使用旧版浏览器的访问者只会看到您的后备字体。

Bram Stein，来自 2022 年网络年鉴

子集字体

字体文件通常包含大量字形，用于表示它们支持的所有不同字符。不过，您可能不需要网页上的所有字符，可以通过字体子集来缩减字体文件的大小。

@font-face 声明中的 unicode-range 描述符会告知浏览器字体可用于哪些字符。

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

如果网页包含与 Unicode 范围匹配的一个或多个字符，系统会下载相应的字体文件。unicode-range 通常用于根据网页内容使用的语言提供不同的字体文件。

unicode-range 通常与子集技术结合使用。子集字体包括原始字体文件中包含的一小部分字形。例如，网站可能会为拉丁字符和西里尔字符分别生成子集字体，而不是向所有用户提供所有字符。每个字体的字形数量差异很大：拉丁字体通常每个字体包含 100 到 1,000 个字形；CJK 字体可能包含超过 10,000 个字符。移除未使用的字形可以显著缩减字体的文件大小。

某些字体提供商可能会自动提供不同版本的字体文件，其中包含不同的子集。例如，Google Fonts 默认会执行以下操作：

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

改用自托管解决方案后，这项优化很容易被忽略，从而导致本地字体文件变大。

如果字体提供程序允许，您还可以通过 API（Google Fonts 通过提供 text 参数支持此功能）或手动修改字体文件，然后自行托管来手动对字体进行子集内嵌。用于生成字体子集的工具包括 subfont 和 glyphanger。不过，请检查您使用的字体的许可是否允许子集成和自行托管。

减少网页字体

能够传递最快的字体是其最初未请求的字体。您可以通过系统字体和可变字体这两种方式来减少您网站上使用的网页字体数量。

系统字体是用户设备界面使用的默认字体。系统字体通常因操作系统和版本而异。由于字体已安装，因此无需下载。系统字体特别适合用于正文。

如需在 CSS 中使用系统字体，请将 system-ui 列为 font-family：

font-family: system-ui

可变字体背后的理念是，一个可变字体可以用来替换多个字体文件。可变字体的工作原理是定义“默认”字体样式，并提供用于操控字体的“轴”。例如，具有 Weight 轴的可变字体可用于实现字体，以前需要为浅色、常规、粗体和加粗使用单独的字体。

并非所有人都会从改用可变字体中受益。可变字体包含许多样式，因此文件大小通常比仅包含一种样式的单个非可变字体大。使用可变字体后效果提升最明显的网站是那些使用（并需要使用）各种字体样式和粗细的网站。

字体渲染

当遇到尚未加载的 Web 字体时，浏览器会面临一个两难选择：在 Web 字体到达之前，是否应暂停渲染文本？或者，在 Web 字体到达之前，应使用回退字体渲染文本？

不同的浏览器会以不同的方式处理此场景。默认情况下，如果未加载关联的网页字体，基于 Chromium 和 Firefox 的浏览器最多可阻止文本渲染 3 秒；Safari 则会无限期地阻止文本渲染。

您可以使用 font-display 属性来配置此行为。这项选择可能具有重大影响：font-display 可能会影响 LCP、FCP 和布局稳定性。

选择适当的 font-display 策略

font-display 会告知浏览器在未加载关联的 Web 字体时应如何继续渲染文本。它是按字体定义的。

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display 有五个可能的值：

值 屏蔽期限 换货期
自动 因浏览器而异 因浏览器而异
屏蔽 2-3 秒 无限
交换 0 毫秒 无限
后备 100 毫秒 3 秒
可选 100 毫秒 无
  • 屏蔽期：屏蔽期从浏览器请求 Web 字体开始。在禁止期内，如果网页字体不可用，字体将以不可见的后备字体渲染，因此文本将对用户不可见。如果字体在屏蔽期结束时仍不可用，则将使用回退字体进行渲染。
  • 交换期：交换期晚于阻止期。如果网页字体在交换期内可用，系统会将其“换入”。

font-display 策略反映了关于性能和美观性取舍的不同观点。因此，很难提供推荐的方法，因为这取决于个人偏好、Web 字体对网页和品牌的重要性，以及延迟到达的字体换入时可能造成的震撼程度。

对于大多数网站，以下三种策略最为适用：

  • 如果性能是最高优先级：请使用 font-display: optional。这是最“高效”的方法：文本渲染延迟不超过 100 毫秒，并且可以保证不会出现与字体切换相关的布局偏移。不过，缺点是，如果网络字体送货延迟，系统将不会使用该字体。

  • 如果快速显示文本是首要任务，但您仍希望确保使用 Web 字体：请使用 font-display: swap，但务必尽早提交字体，以免导致布局偏移。此选项的缺点是，当字体送货延迟时，会出现突兀的转换。

  • 如果确保文本以 Web 字体显示是首要任务：请使用 font-display: block，但务必尽早提交字体，以最大限度地减少文本延迟。缺点是，初始文本显示会延迟。请注意，尽管如此，由于文本实际上是不可见的，因此仍可能会导致布局偏移，因此回退字体空间会用于预留空间。网页字体加载后，这可能需要不同的空间，因此需要进行转换。不过，与 font-display: swap 相比，这种转换可能不会那么突兀，因为文本本身不会发生转换。

另请注意，您可以结合使用这两种方法：例如，将 font-display: swap 用于品牌宣传和其他具有视觉吸引力的页面元素；将 font-display: optional 用于正文中所用的字体。

减少后备字体和网页字体之间的切换

如需减少 CLS 影响，您可以使用新的 size-adjust 属性。如需了解详情，请参阅介绍 CSS size-adjust 的文章。这是我们工具集中最近才添加的功能，因此目前较为高级且需要手动操作。但我们一定会在未来进行实验，并关注工具的改进！

总结

网络字体仍然是性能瓶颈，但我们有越来越多的选项可以优化它们，以尽可能减少此瓶颈。