what is font-display CSS feature?

问题

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?

回答1:

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).

Consider a structure like this:

@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; 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).

This gives you initial content on the screen in several milliseconds instead of potentially waiting several seconds for a font to load.

回答2:

Also Preload web fonts Use to fetch your font files earlier.

Ensure text remains visible during webfont load

回答3:

Font Feature is a technique to use advanced text styles and effects as designed by the font developer. A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps.This picture explain much better

You can solve this issue by using @fontface or you can also try different setting of font-display.

来源：https://stackoverflow.com/questions/55677376/what-is-font-display-css-feature

标签

css

Sass

web-frontend