Propiedad CSS font-display
El descriptor font-display define cómo los archivos de fuente son descargados y mostrados por el navegador. Este descriptor tiene los siguientes valores:
La tipografía solía limitarse a fuentes locales, donde las únicas fuentes disponibles eran las llamadas «seguras para la web». Luego llegó la regla @font-face, que permitía subir archivos de fuente a un servidor y escribir un conjunto de reglas que nombran la fuente e indican al navegador dónde descargar los archivos. Esto dio lugar a servicios que permitían usar fuentes personalizadas. Sin embargo, estos archivos de fuente personalizados pueden ser grandes y aumentar el tiempo de carga de la página.
Existía otra preocupación relacionada con el FOUT («flash de texto sin estilo»). Los navegadores mostraban una fuente del sistema mientras se descargaba la fuente personalizada. Esto generaba preocupación, ya que los diseñadores web lo consideraban un secuestro de la experiencia de usuario. Hoy en día, los navegadores suelen ocultar el texto hasta que se descarga la fuente personalizada, lo cual se conoce como FOIT («flash de texto invisible»).
Pero ninguno de los métodos mencionados anteriormente es ideal. En su lugar, ahora existe el descriptor font-display, que le indica al navegador qué preferimos: FOUT o FOIT.
| Valor inicial | auto |
|---|---|
| Se aplica a | Regla @font-face. |
| Heredable | No. |
| Animable | No. |
| Versión | Módulo de Fuentes CSS Nivel 4 |
| Sintaxis DOM | object.style.fontDisplay = "swap"; |
Sintaxis
Sintaxis del descriptor font-display de CSS
font-display: auto | block | swap | fallback | optional | initial | inherit;¿Cómo usar la regla @font-face?
@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 downloaded */
font-display: optional;
}Valores
| Valor | Descripción |
|---|---|
| auto | La visualización de la fuente es definida por el navegador. |
| block | Especifica un período de bloqueo corto y un período de intercambio infinito. |
| swap | Asigna a la cara de fuente un período de bloqueo muy pequeño y un período de intercambio infinito. |
| fallback | Asigna a la cara de fuente un período de bloqueo muy pequeño y un período de intercambio corto. |
| optional | Asigna a la cara de fuente un período de bloqueo muy pequeño y ningún período de intercambio. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son los valores posibles para la propiedad CSS 'font-display'?