When remote fonts are used in web pages, the problem of font loading delay caused by network factors should be considered. There is usually a gap period: the document has been loaded but the font file has not been loaded and analyzed. How to plan the rendering of Chinese text during the gap period? This is done using a property: font-display.

Attribute is introduced

This property specifies the document’s presentation strategy when remote fonts are downloaded and available. If you use remote fonts on your site:

@ font-face { font-family: XXXX; SRC: url (/ path/to/fonts/examplefont woff) format (' woff);Copy the code

There are three parts to the remote font rendering strategy:

  • Block period: indicates that the browser blocks the document while waiting for the font to download. When blocking fonts do not load smoothly, browsers use alternative fonts
  • Swap period: When the font is finished loading during the swap period, the alternate font rendered in the previous step needs to be replaced with the target font
  • Failure period: If the font cannot be downloaded in the above period, it will automatically adapt to the fallback font.

Here we focus on the first two, the blocking period, the exchange period of different combinations correspond to different values of the font-display property:

  • block: indicates that the document blocks for a period of time3s) to wait forRemote font fileIf the font download is not completed within this time, use the alternative font and replace it after the remote font download is completed.
  • swap: Indicates that the document does notblock(Very short blocking period <1s), directly use the alternative font, and then replace the remote font after downloading.
  • fallback: Indicates that the document does notblock(Very short blocking period <1s), directly use alternative fonts, and during the exchange period (presumably2s), then replace the font, otherwise abandon the use of remote fonts.
  • optional: Indicates that the document does notblock(Very short blocking period <1s), such a short time to complete the loading of the font use font otherwise abandon use.
  • auto: Automatic mode, browser determined (chromeThe behavior withswapSimilar)

Application Scenario Analysis

After analyzing the characteristics of the attribute, we will analyze its application scenarios.

If you want your site to display the font of your choice as first as possible, you can use the block property value: it blocks the text for a while until the font file has been downloaded and parsed before rendering the text, so there is no uncomfortable visual experience due to the abrupt font switch. The consistency of text vision is guaranteed.

If you want your site to keep the text as visible as possible, use the swap property value: it will render the text in an alternate font and replace it when the font is ready to load. The visibility of the text is guaranteed.

There are also cases where the absence of the selected font is not a major experience issue, in other words: the font is not particularly important, so choose the fallback value. But there aren’t many.

In general,swap can be used in more scenarios.

conclusion

In order to better observe the difference between these values, we wrote an observation tool:font-display-testing, can be set by font file load delay and differentfont-displayTo understand the difference between these values: