什么是字体显示CSS功能? [英] what is font-display CSS feature?

问题描述

对于我的网站，我从Google的PageSpeed Insights获得了以下反馈:利用字体显示CSS功能来确保在加载Web字体时用户可见文本.是什么意思?

For my website, I am getting following feedback from Google's PageSpeed Insights: Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading. What does that mean?

推荐答案

CSS font-display 可让您控制在加载网络字体时/之后将网络字体与系统字体交换的方式.Lighthouse告诉您您正在使用 @ font-face 加载大量字体数据，因此在等待字体加载时会有空白(长达几秒钟)的空白

CSS font-display allows you to control how web fonts are swapped with system fonts while/after they load. Lighthouse is telling you that you're loading a large amount of font data using @font-face so there will be lag (up to several seconds) where your content is blank while waiting for the fonts to load.

您可以更改此设置，以使后备字体(从本地系统)立即加载，然后在加载后与您的网络字体交换.(请注意，您的字体可能大小不同，并且在加载时会引起跳动).

You can change this so that a fallback font (from your local system) loads right away and then gets swapped with your web fonts once they're loaded. (be aware that your fonts may have different sizes and cause things to jump around when they load).

考虑这样的结构:

@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; means when the page renders, all paragraph tags will use the FIRST AVAILABLE fallback font until Open Sans Regular has loaded. (In this case Helvetica on a Mac and Arial on Windows).

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

这篇关于什么是字体显示CSS功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！