font-display
CSS font-display Property
The font-display property defines how font files are downloaded and displayed by the browser. This property has the following values:
auto
block
swap
fallback
optional
The typography was used to be limited to local fonts where the only available fonts were the ones called “web-safe”. Then came @font-face rule allowing to upload font files to a server and write a set of rules naming the font and telling the browser where to download the files. It gave rise to the services which allowed to use custom fonts. But these custom font files can be large and reduce the website load time.
There was another concern connected with FOUT (“flash of unstyled text”). Browsers would display a system font while the custom font was being downloaded. This gave cause for concern as web designers viewed it as the user experience hijacking. Today browsers commonly hide the text until the custom font is downloaded, which is referred to as FOIT (“flash of invisible text”).
But none of the above-mentioned methods is great. Instead, now there is the font-display property telling the browser what we prefer: FOUT or FOIT.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.fontDisplay = “swap”; |
Syntax
Syntax
font-display: auto | block | swap | fallback | optional | initial | inherit;
@font-face {
font-family: 'MyWebFont';
/* Define the custom font name */
src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
/* Define where the font can be downlaoded */
font-display: optional;
}
Values
Values
| Value | Description |
|---|---|
| auto | Font display is defined by the browser. |
| block | Briefly hides the text until the font has fully downloaded. |
| swap | Gives the font face a very small block period and an infinite swap period. |
| fallback | Gives the font face a very small block period and a short swap period. |
| optional | Gives the font face a very small block period and no swap period. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |