优化网页字体

Silly大约 9 分钟

优化网页字体

在本单元中，您将了解一些优化网页字体的方法。

网络字体会影响网页在加载时和呈现时的性能。较大的字体文件可能需要一段时间才能下载完毕，并且会对 First Contentful Paint (FCP) 产生负面影响，而不正确的 font-display 值则可能会导致不必要的布局偏移，进而导致网页的Cumulative Layout Shift (CLS)。

在讨论优化网页字体之前，了解浏览器如何发现这些字体会很有帮助，有助于您了解 CSS 如何在某些情况下阻止检索不必要的网页字体。

发现广告系列

页面的网络字体是使用 @font-face 声明在样式表中定义的：

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

上述代码段定义了一个名为 "Open Sans" 的 font-family，并告知浏览器在哪里可以找到相应的网页字体资源。为了节省带宽，浏览器在确定当前页面的布局需要网页字体之前，不会下载该字体。

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

在上述 CSS 代码段中，浏览器会在解析网页的 HTML 中的 <h1> 元素时下载 "Open Sans" 字体文件。

`preload`

如果您的 @font-face 声明是在外部样式表中定义的，浏览器只有在下载该样式表之后才能开始下载这些声明。这使得网络字体资源被延迟发现，但有一些方法可以帮助浏览器更快地发现网络字体。

您可以使用 preload 指令发起对网页字体资源的提前请求。preload 指令可让网页字体在网页加载初期被检测到，浏览器会立即开始下载这些字体，无需等待样式表完成下载和解析。preload 指令不会等到网页上需要相应字体时再执行。

<!-- The `crossorigin` attribute is required for fonts—even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

注意：请谨慎使用 preload 指令。过度使用 preload 指令可能会中断其他关键资源的带宽。如果使用过多，preload 指令可能会下载当前网页不需要的字体

此外，请务必注意，字体属于 CORS 资源。因此，预加载字体时必须指定 crossorigin 属性，即使这些字体是自托管的字体也是如此。

内嵌 `@font-face` 声明

您可以使用 <style> 元素在 HTML 的 <head> 中内嵌会阻止渲染的 CSS（包括 @font-face 声明），以便使字体在网页加载的早期阶段被检测到。在这种情况下，浏览器会在网页加载初期发现网页字体，因为它不需要等待外部样式表下载。

注意：只有在所有阻止渲染的资源加载完毕后，浏览器才会开始下载字体文件。这意味着，如果您已内嵌 @font-face 声明，但其余的 CSS 位于外部样式表中，浏览器仍然需要等待外部样式表下载完毕。内嵌 @font-face 声明优于使用 preload 提示，因为浏览器只会下载呈现当前网页所需的字体。这样可以消除下载未使用的字体的风险。

重要提示 ：不建议将字体文件本身内嵌到您的 CSS 或任何其他资源中，因为这样做所需的 base64 编码方案会产生较大的载荷，而内嵌可能会导致延迟预加载扫描程序发现其他关键资源。## 下载

在发现网络字体并确保当前页面布局需要这些字体后，浏览器可以下载这些字体。网页字体的数量、编码和文件大小会显著影响浏览器下载和呈现网页字体的速度。

自行托管网页字体

网络字体可通过第三方服务（如 Google Fonts）提供，也可以在源站上自行托管。使用第三方服务时，您的网页需要先打开与提供商网域的连接，然后才能开始下载所需的网页字体。这可能会延迟网页字体的发现和后续下载。

使用 preconnect 资源提示可以减少此开销。通过使用 preconnect，您可以告知浏览器比浏览器通常更快打开跨源连接：

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

上述 HTML 代码段会提示浏览器与 fonts.googleapis.com 建立连接，并与 fonts.gstatic.com 建立 CORS 连接。某些字体提供程序（如 Google Fonts）会提供来自不同来源的 CSS 和字体资源。

您可以通过自行托管网页字体来消除对第三方连接的需要。在大多数情况下，自托管网络字体比从跨源下载字体更快。如果您打算自行托管网页字体，请检查您的网站是否使用了内容分发网络 (CDN)、HTTP/2 或 HTTP/3，并为网站所需的网页字体设置正确的缓存标头。

仅使用 WOFF2 和 WOFF2

WOFF2 获得了广泛的浏览器支持和最佳压缩效果，比 WOFF 高出 30%。文件缩小可加快下载速度。WOFF2 格式通常是现代浏览器实现完全兼容性所需的唯一格式。

注意：只有在需要支持旧版浏览器时，您才可能需要使用其他格式（例如 WOFF、EOT 和 TTF）。如果您不需要支持旧版浏览器，则没有理由依赖 WOFF2 以外的网页字体格式。### 设置网页字体子集

网络字体通常包含各种不同的字形，需要这些字形来表示不同语言中使用的各种字符。如果您的网页仅以一种语言（或使用单一字母表）提供内容，您可以通过子集内嵌来减小网页字体的大小。此操作通常通过指定数字或 Unicode 码位范围来实现。

子集是原始网页字体文件中包含的减少的字形集。例如，您的网页可能会提供部分拉丁字符，而不是提供所有字形。根据所需的子集，移除字形可以显著减小字体文件的大小。

某些网页字体提供商（如 Google Fonts）通过使用查询字符串参数自动提供子集。例如，https://fonts.googleapis.com/css?family=Roboto&subset=latin 网址会提供仅包含拉丁字母的 Roboto 网页字体的样式表。

如果您决定自行托管网页字体，下一步就是使用字形符或子字体等工具自行生成并托管这些子集。

但是，如果您没有足够的能力自行托管自己的网页字体，则可以通过指定仅包含网站所需的 Unicode 代码点的额外 text 查询字符串参数，将 Google Fonts 提供的网页字体子集。例如，如果您网站上的显示网页字体只需要短语“Welcome”所需的少量字符，您可以通过以下网址使用 Google Fonts 请求这部分字体：https://fonts.googleapis.com/css?family=Monoton&text=Welcome。如果这种极端子集内嵌对您的网站有用，则可以显著减少网站上单个字体所需的网页字体数据量。

优化网页字体

优化网页字体

发现广告系列

`preload`

内嵌 `@font-face` 声明

自行托管网页字体

仅使用 WOFF2 和 WOFF2

字体渲染

`block`

`swap`

`fallback`

`optional`

字体演示