在前面的单元中，您学习了如何优化 HTML、CSS、JavaScript 和媒体资源在本单元中，您将了解一些网站优化方法 字体。
网络字体会影响网页在加载时间和渲染时的性能。
大型字体文件的下载可能需要一些时间，并会对
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 代码段中，浏览器下载了 "Open Sans" 字体文件
因为它解析了网页 HTML 中的 <h1> 元素。
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>
内嵌 @font-face 声明
您可以通过内嵌方式使字体在页面加载期间尽早被发现
会阻塞渲染的 CSS（包括 @font-face 声明），<head>
使用 <style> 元素编写 HTML 代码。在这种情况下，浏览器会发现
网页字体，因为不需要等待外部
要下载的样式表。
与使用 preload 相比，内嵌 @font-face 声明的优势在于
因为浏览器只会下载呈现当前
页面。这样可以消除下载未使用的字体的风险。
下载
在发现网页字体并确保当前网页需要字体后， 那么浏览器就可以下载它们。网页字体的数量、编码 而且文件大小会对网页字体的 由浏览器下载并呈现。
自行托管网络字体
网络字体可通过第三方服务（例如 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 拥有宽大的浏览器支持和最佳的压缩效果 - 最多可优化 30% 而不是 WOFF。文件越小，下载速度就越快。WOFF2 格式往往是完全兼容新型 。
<ph type="x-smartling-placeholder">对您的网页字体进行子集内嵌
网络字体通常包含各种不同的字形， 来表示不同语言中使用的各种字符。如果您的 网页只提供一种语言的内容（或使用单一字母表），那么您可以 通过子集内嵌来减小网页字体的大小。这通常是由 指定数字或 unicode 码位范围。
子集是原始网页中包含的一组缩减字形 字体文件。例如，您的网页可能不会提供所有字形，而是提供 特定拉丁字符子集。根据所需的子集，移除 字形可以显著减小字体文件的大小。
有些网页字体提供商（如 Google Fonts）会通过
查询字符串参数的使用。例如，
https://fonts.googleapis.com/css?family=Roboto&subset=latin网址提供
带有仅使用拉丁字母的 Roboto 网页字体的样式表。
如果您已决定自行托管网络字体，那么下一步就是生成并 您可以使用 glyphanger 或 subfont 等工具自行托管这些子集。
但是，如果您无法自行托管自己的网络字体，
通过指定额外的 text 来指定 Google Fonts 提供的网络字体子集
查询字符串参数，该参数仅包含
。例如，如果您的网站上有一种显示网页字体
短语“Welcome”需要少量字符，您可以
通过以下网址，使用 Google Fonts 请求该子集：
https://fonts.googleapis.com/css?family=Monoton&text=Welcome。这可以
可显著减少一种字体所需的网页字体数据量
字体渲染
在浏览器发现并下载某种网络字体后，
。默认情况下，浏览器会阻止呈现任何使用
网页字体，直到下载完成。您可以调整浏览器的文本呈现
行为，并配置哪些文字应该在网络之前显示（或不显示）
font-display CSS 属性已完全加载字体。
block
font-display 的默认值为 block。有了 block，浏览器
用于阻止呈现任何使用指定网页字体的文本。与众不同
会略有不同Chromium 和 Firefox 块呈现
最长为 3 秒，然后才能使用后备广告。Safari 会无限期禁止
直到网页字体加载完毕
swap
swap 是最常用的 font-display 值。swap 不会屏蔽
并会立即以后备形式显示文字，然后再换入
指定网页字体。这样，你无需等待就能立即展示内容
以供下载
不过，swap 的缺点是，如果
网页字体和 CSS 中指定的网页字体在线条方面差别很大，
高度、字距调整和其他字体指标。如果出现以下情况，这可能会影响您网站的 CLS：
不在意使用 preload 提示立即加载网页字体资源
或者不考虑其他 font-display 值。
fallback
font-display 的 fallback 值介于
block和swap。与 swap 不同，浏览器会阻止字体渲染，但
应仅在极短的时间内换入后备文字。与 block 不同的是，
但屏蔽期极短
使用 fallback 值可以在快速网络上取得良好效果，其中，如果网页字体
网页字体是网页上直接使用的字体，
初始渲染。不过，如果网络速度较慢，
首先在阻止期结束后更改网页字体
。
optional
optional 是最严格的 font-display 值，并且仅使用网页
超过 100 毫秒。如果网页字体
那么就不会再在网页上使用，而且浏览器会使用
在下载网页字体时，当前导航的备用字体
背景并放入浏览器缓存中。
因此，后续网页导航可以立即使用网页字体，因为
它已经下载完毕。font-display: optional 可避免所见的布局偏移
但对于 swap，有些用户看不到网页字体在网页字体的显示时间上太晚，
初始网页导航。
字体演示
知识测验
浏览器何时下载网络字体资源（假设它不是
使用 preload 指令提取）？
要投放网站广告，唯一（也是最高效）的格式是什么 字体？
下一篇：代码拆分 JavaScript
了解了字体优化之后，您现在可以 我们将进入下一单元，该单元介绍的是很有可能改进的主题 网页初始加载速度的提升，也就是延迟 通过代码拆分 JavaScript 开发应用。这样，即使占用带宽和 CPU 使用量 尽可能减少网页争用 用户很有可能与之互动的时段