什么是字体显示 CSS 功能？

Posted 2023-02-18

【中文标题】什么是字体显示 CSS 功能？

【英文标题】：what is font-display CSS feature?

【发布时间】：2019-09-04 17:43:45

【问题描述】：

对于我的网站，我从 Google 的 PageSpeed Insights 获得以下反馈：利用字体显示 CSS 功能确保在加载网络字体时文本是用户可见的。这是什么意思？

【问题讨论】：

这里有一篇文章你可能会找到答案css-tricks.com/font-display-masses

【参考方案1】：

CSS font-display 允许您控制网页字体在加载时/加载后如何与系统字体交换。 Lighthouse 告诉您，您正在使用 @font-face 加载大量字体数据，因此在等待字体加载时，您的内容会出现空白（最多几秒钟）。

您可以更改此设置，以便立即加载备用字体（来自您的本地系统），然后在加载后与您的网络字体交换。 （请注意，您的字体可能有不同的大小，并且在加载时会导致内容跳跃）。

考虑这样的结构：

@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; 表示当页面呈现时，所有段落标签将使用 FIRST AVAILABLE 后备字体，直到 Open Sans Regular 加载。 （在这种情况下，Mac 上的 Helvetica 和 Windows 上的 Arial）。

这会在几毫秒内为您提供屏幕上的初始内容，而不是等待几秒钟才能加载字体。

【讨论】：

如果不使用font-display: swap会怎样？它似乎喜欢它的行为方式。

问题是关于如何提高谷歌灯塔分数。最好的做法是尽快在屏幕上显示内容，而 font-display: swap 可以做到这一点。

【参考方案2】：

还预加载网络字体 用于更早地获取您的字体文件。

Ensure text remains visible during webfont load

【参考方案3】：

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

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

【讨论】：

这个答案没有解决font-display 的作用，因为它与页面速度和@font-face 的加载有关。从 Google 搜索中复制和粘贴并不能真正帮助提高社区的知识...