什么是字体显示CSS功能？

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

CSS font-display允许您控制在加载时/之后将Web字体与系统字体交换的方式。PageSpeed告诉您，您正在使用加载大量字体数据，@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";
}