La font-displaypropiedad define cómo el navegador carga y muestra los archivos de fuentes. Se aplica a la @font-faceregla que define fuentes personalizadas en una hoja de estilo.
@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: fallback; /* Define how the browser behaves during download */ )Valores
La font-displaypropiedad acepta cinco valores:
auto(predeterminado): permite que el navegador utilice su método predeterminado de carga, que suele ser similar alblockvalor.block: Indica al navegador que oculte brevemente el texto hasta que la fuente se haya descargado por completo. Más precisamente, el navegador dibuja el texto con un marcador de posición invisible y luego lo cambia con la fuente personalizada tan pronto como se carga. Esto también se conoce como "destello de texto invisible" o FOIT.swap: Indica al navegador que utilice la fuente alternativa para mostrar el texto hasta que la fuente personalizada se haya descargado por completo. Esto también se conoce como "destello de texto sin estilo" o FOUT.fallback: Actúa como un compromiso entre los valoresautoyswap. El navegador ocultará el texto durante unos 100 ms y, si la fuente aún no se ha descargado, utilizará el texto alternativo. Cambiará a la nueva fuente después de que se descargue, pero solo durante un breve período de intercambio (probablemente 3 segundos).optional: Por ejemplofallback, este valor le dice al navegador que inicialmente oculte el texto, luego haga la transición a una fuente alternativa hasta que la fuente personalizada esté disponible para su uso. Sin embargo, este valor también permite que el navegador determine si la fuente personalizada se utiliza en absoluto, utilizando la velocidad de conexión del usuario como factor determinante cuando es menos probable que las conexiones más lentas reciban la fuente personalizada.
Aquí hay otra forma de pensar en ellos.
| Período de bloqueo | Período de intercambio | |
|---|---|---|
| cuadra | Pequeño | Infinito |
| intercambio | Ninguno | Infinito |
| retroceder | Extremadamente corto | Pequeño |
| Opcional | Extremadamente corto | Ninguno |
Por qué necesitamos font-display
Antes de que tuviéramos un soporte generalizado @font-face, nuestro arsenal tipográfico se limitaba a fuentes locales, donde las únicas fuentes disponibles eran las que venían precargadas en la computadora del usuario final. A estas fuentes las llamamos "seguras para la Web" porque el navegador no necesita descargar nada para que se procesen.
Luego vino la @font-faceregla que otorgó a los diseñadores web y desarrolladores front-end nuevos poderes tipográficos como nunca antes. Nos permitió subir archivos de fuentes a un servidor y escribir un conjunto de reglas en nuestras hojas de estilo que nombran la fuente y le dicen al navegador dónde descargar los archivos. También dio lugar a servicios como Google Fonts que trajeron fuentes personalizadas a las masas. ¡Finalmente, se derribó un gran obstáculo que separaba el diseño web del diseño impreso!
Sin embargo, las fuentes personalizadas llegaron (y continúan llegando) a un costo. Los archivos de fuentes pueden ser grandes y el tiempo extra para descargarlos puede ralentizar el rendimiento de un sitio, especialmente para dispositivos con una conexión de red más lenta. El costo adicional para los usuarios con planes de datos limitados también se convirtió en un factor.
Otra preocupación particular que surgió con las fuentes personalizadas es lo que se denominó "destello de texto sin estilo" o FOUT para abreviar. Los navegadores mostrarían por defecto una fuente del sistema mientras esperan que se descargue la fuente personalizada. Esto permitió que las páginas web se cargaran más rápido, pero generó preocupaciones entre los diseñadores web que vieron esto como un secuestro de la experiencia del usuario y tergiversando el diseño previsto. Los navegadores web actuales generalmente ocultan el texto hasta que se descarga la fuente personalizada, a lo que ahora nos referimos como un "destello de texto invisible" o FOIT.
Ni FOUT ni FOIT son geniales. Tenemos formas de optimizar el rendimiento de las fuentes personalizadas para ayudar a aliviar los efectos. Sin embargo, ahora tenemos font-displayque decirle al navegador si preferimos FOUT, FOIT o incluso algo intermedio.
Prueba de soporte
Interesante advertencia señalada por Šime Vidas:
La visualización de fuentes CSS es un
@font-facedescriptor y no una propiedad, por lo que su compatibilidad en el navegador no se puede probar con consultas de características (@supportsregla CSS y API de compatibilidad con CSS ).
Más información
- Especificación de nivel 1 del módulo de controles de representación de fuentes CSS: un borrador de la especificación de la propiedad.
font-displaypara las masas: Jeremy Wagner nos presentó la propiedad aquí en CSS-Tricks.- Uso
@font-face: una explicación completa de la regla y las mejores prácticas sobre cómo usarla. - Pila de fuentes del sistema: un fragmento para renunciar por completo a las fuentes personalizadas y depender únicamente de las fuentes del sistema del usuario.
- Controlar el rendimiento de la fuente con
font-display: Un buen escrito sobre el tema de Google.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 60 | 58 | No | 79 | 11,1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |