El descriptor CSS font-display: @font-face libre de males 3.8.17

El descriptor CSS font-display: @font-face libre de males

El uso de tipografías no seguras o ajenas al sistema operativo en la web siempre a estado acompañado de una serie de problemas inherentes a la necesidad de poner a disposición del navegador un recurso (el archivo tipográfico) que no tiene.

Poner a su disposición y lidiar con él. Entre otros.

Son varios los artículos de este blog dedicados a la regla @font-face. Entre otros el muy veterano (2012) la guía de @font-face y resolución de sus problemas y el más reciente y actual Bálsamos para el renderizado de @font-face.

Este último centrado en recursos y formas de evitar los problemas asociados al renderizado de la tipografía. En especial los conocidos como FOIT (Flash of Invisible Text) o FOUT (flash of unstyled text).

Hasta el momento prácticamente todas las soluciones propuestas para evitar estos inconvenientes del uso de @font-face se basan en lenguajes ajenos a CSS. CSS pese a ser "el creador" del problema no ha ofrecido una solución al mismo (entre comillas lo de "creador", pues realmente es el navegador en el manejo de los archivos de fuentes).

CSS Font Rendering Controls Module Level 1

Unofficial Proposal Draft by Tab Atkins & Kenji Baheux

Al utilizar fuentes web descargadas a través de @font-face el agente de usuario tiene que saber qué hacer mientras la fuente se está cargando.

Para ayudarle a tomar esta decisión podemos usar el descriptor* CSS font-display:

El descriptor font-display para @font-face determina cómo se mostrará una tipografía, basándose en si se descarga y cuándo estrá lista para su uso.

El descriptor CSS font-display

Tabla de características del descriptor CSS font-display:

Nombre: font-display
Para: @font-face
Valor: auto | block | swap | fallback | optional
Inicial: auto

Entiende block como el hecho de bloquear el dibujado del texto o mostrarlo "invisible" (efecto FOIT) y swap como el hecho de reemplazar por la fuente declarada en @font-face la usada por defecto por el navegador mientras tanto no la ha descargado (efecto FOUT).

• auto: El navegador selecciona la estrategia para renderizar la tipografía.
  Quiçir: cada uno se comportará como lo hace ahora: fout, foit,...
• block: el navegador tiene un pequeño tiempo (*-3s) de bloqueo (block) y todo lo que necesite para descargar y reemplazar (swap) la fuente.
  Quiçir: inicialmente al texto lo dibuja "invisible" (esos 3s) si no tiene la tipografía ya cargada pero lo mostrará tan pronto como ya la tenga disponible (descargada).
  Este valor sólo debería ser usado para textos cortos y cuando la tipografía usada sea imprescindible para que la página sea usable.
• swap: 0s de bloqueo (block) y tiempo infinito para su descarga y reemplazo (swap).
  Quiçir: el navegador dibuja visible el texto con una tipografía alternativa a la declarada en @font-face (no hay efecto foit) y lo reemplazará con la declarada en @font-face tan pronto como la tenga disponible.
• fallback: el navegador muestra el texto invisible (block) por un periodo muy corto de tiempo (100ms o menos) y un tiempo corto (+-3s) para mostrarlo con una alternativa a @font-face.
  Quiçir: Que se usará la alternativa hasta tener disponible la fuente declarada pero si pasa demasiado tiempo sin tenerla disponible no habrá reemplazo (swap) de la tipografía (habrá un pequeño foit pero no fout).
• optional: muy poco tiempo (100ms) de texto invisible (block) y 0s para el reemplazo (swap). Si no tiene disponible la tipografía antes de expirar estos dos tiempos el navegador podrá abortar la descarga de la fuente o seguir descargándola con una prioridad mínima.
  Quiçir: que se usará la tipografía de @font-face si el navegador ya la tenía disponible y de no ser así usará otra alternativa. La fuente podrá ser descargada en segundo plano para futuras recargas de la página.

* Descriptor CSS:
De forma coloquial, un descriptor CSS es una palabra clave (como una propiedad CSS en su forma de uso y sintaxis descriptor: valor;) con la particularidad de que sólo puede ser usada en alguna regla específica (at-rule). Como el descriptor src y font-family en @font-face o simbols y system en @counter-style o ref='contadores CSS de nivel 3. Ver todos los descriptores CSS

Estado del descriptor CSS font-display

Como reseñaba antes, el descriptor CSS font-display está recogido en la propuesta NO OFICIAL aún de Tab Atkins y Kenji Baheux (ambos de Google) titulada: "CSS Font Rendering Controls Module Level 1".

Por tanto no sería extraño que de seguir su desarrollo bajo el paraguas del W3c sufriese cambios y modificaciones sustanciales.

ACTUALIZACIÓN
CSS Fonts Module Level 4 es el documento del W3c donde ya aparece recogida el descriptor font-display sin cambios significativos respecto al documento de Tab Aatkins y Kenji Baheux.

Por cierto, este nuevo documento también incluye unas nuevas propiedades especialmente queridas por mi con un ligero cambio en su nombre: tamaño máximo y mínimo de la fuente: las propiedades CSS font-min-size and font-max-size.

Firefox (Gecko) 46+ y Chrome 51+ (versión escritorio) la soportan previa habilitación por el usuario en la configuración. Y en Chrome 60 y Opera 47 ya vienen por defecto. Mira en caniuse.com el estado a su soporte en cualquier momento futuro.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso