在之前的模块中，您学习了如何优化 HTML、CSS、JavaScript 和媒体资源。在本模块中，您将了解一些优化 Web 字体的方法。

Web 字体可能会在加载时间和渲染时间影响网页性能。

大型字体文件可能需要一段时间才能下载完毕，并会对 First Contentful Paint (FCP) 产生负面影响，而错误的 font-display 值可能会导致不必要的布局偏移，从而影响网页的累积布局偏移 (CLS)。

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

发现

网页的 Web 字体在样式表中使用 @font-face 声明进行定义：

@font-face {

font-family: "Open Sans";

src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");

}

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

h1 {

font-family: "Open Sans";

}

在上面的 CSS 代码段中，浏览器会在解析网页 HTML 中的

元素时下载 "Open Sans" 字体文件。

preload

如果您的 @font-face 声明是在外部样式表中定义的，则浏览器只有在下载完样式表后才能开始下载这些声明。这使得 Web 字体成为后期发现的资源，但我们可以采取一些方法来帮助浏览器更早地发现 Web 字体。

您可以使用 preload 指令提前请求 Web 字体资源。preload 指令可让浏览器在网页加载期间尽早发现 Web 字体，并立即开始下载这些字体，而无需等待样式表完成下载和解析。preload 指令不会等到网页需要字体时才开始加载。

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

此外，还需注意，字体是 CORS 资源。因此，在预加载字体时，您必须指定 crossorigin 属性，即使字体是自行托管的也是如此。

内嵌 @font-face 声明

您可以使用