什么是font-display CSS特性？

Question

针对我的网站，我从Google的PageSpeed Insights获得了以下反馈：使用font-display CSS功能以确保在Web字体加载时文本可见。这是什么意思呢？

- Mojo

---

这里有一篇文章，你可能会在其中找到答案： https://css-tricks.com/font-display-masses - Jakob E

Answer 1

CSS font-display 允许您在网页字体加载时/之后控制如何与系统字体交换。Lighthouse 提示您正在使用 @font-face 加载大量字体数据，因此会出现延迟（长达数秒），导致内容在等待字体加载时变得空白。

您可以更改设置，使回退字体（来自本地系统）立即加载并在Web字体加载完成后进行交换。（请注意，您的字体大小可能不同，在加载时可能导致页面跳动）。

考虑使用以下结构：

@font-face {
  font-family: "Open Sans Regular";
  font-style: normal;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

p {
  font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif;
}

font-display:swap;的意思是，当页面渲染时，所有段落标签将使用第一个可用的备用字体，直到Open Sans Regular加载完成。（在此情况下，在Mac上使用Helvetica，在Windows上使用Arial）。

这使得您可以在几毫秒内获得屏幕上的初始内容，而不必等待字体加载数秒钟。

- Bryce Howitson

---

如果您不使用 font-display: swap 会发生什么？它似乎会表现得相同。 - adi518

如何提高谷歌 Lighthouse 得分是问题所在。让内容尽快出现在屏幕上是最佳实践，而 font-display: swap 可以实现这一点。 - Bryce Howitson

Answer 2

另外，预加载网络字体。使用 <link rel="preload"> 提前获取字体文件。

确保在网络字体加载期间文本仍然可见

- Sabry Suleiman

Answer 3

字体特性是一种技术，可以使用由字体开发人员设计的高级文本样式和效果。 字体可能支持许多功能：一些示例包括不同类型的连字、表格数字或小型大写字母。这张图片可以更好地解释

您可以通过使用@fontface来解决此问题，或者您也可以尝试不同的font-display设置。

- MIH

---

这个回答并没有解释font-display与页面速度和@font-face加载有什么关系。从谷歌搜索中复制粘贴并不能真正帮助提高社区的知识水平... - Bryce Howitson