Source: How to avoid layout shifts caused by web fonts Basically, the optional value leaves it up to the browser to decide whether to initiate the font download or not. Then, if the font is still not available, it stays with the fallback and never swaps. font-display: optional gives the font face a minimal block period of 100ms.If the font is not loaded during the three-second swap period, the fallback will be used for the rest of the page’s lifetime font-display: fallback hides text for up to 100ms, then only swaps in the web font if it loads within three seconds.Similar to block, this value should only be used when rendering text in a particular font is important for the page font-display: swap shows the font as soon as it loads.Use this value when the font is important for the page In other words, it always swaps in the web font when it loads. font-display: block gives the font a 3s (in most cases) short block period and an infinite swap period.font-display: auto uses whatever font display strategy the user-agent uses.Understanding these periods will allow you to use the font-display values more effectively: If the font is not yet loaded when this period starts, it’s marked as a failed load, causing normal font fallback. The font failure period occurs immediately after the font swap period.If the font-face successfully loads during this period, the font is then used normally. If the font-face is not loaded during this period, any element attempting to use it must instead render with a fallback (system) font (FOUT). The font swap period occurs immediately after the font block period. ![]() ![]() If the font-face successfully loads during this first period, it is then used normally. If the font-face is not loaded during this period, any element attempting to use it must instead render with an invisible fallback font face (FOIT).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |