Search completed in 2.03 seconds.
9 results for "font-display":
font-display - CSS: Cascading Style Sheets
the
font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... syntax /* keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional; values auto the font display strategy is defined by the user agent.
... formal definition related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback
font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal;
font-display: fallback; } specifications specification status comment css fonts module level 4the definition of '
font-display' in that specification.
FontFace.display - Web APIs
this property is equivalent to the css
font-display descriptor.
... css fonts module level 4the definition of '
font-display' in that specification.
...(they are the same as for
font-display.) browser compatibility the compatibility table on this page is generated from structured data.
CSS performance optimization - Learn web development
will-change: opacity, transform; the
font-display property applied to the @font-face rule, the
font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load.
... @font-face { font-family: somefont; src: url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal;
font-display: fallback; } the contain property the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.
Index - Web APIs
this property is equivalent to the css
font-display descriptor.
@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors
font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
prefers-reduced-data - CSS: Cascading Style Sheets
stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400;
font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacs...
Lazy loading - Web Performance
it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css
font-display property, and the font loading api.