Cómo controlar el rendimiento de la fuente con font-display

Rob Dodson

Decidir el comportamiento de una fuente web mientras se carga puede ser importante técnica de ajuste del rendimiento. El nuevo descriptor de visualización de fuentes para @font-face permite que los desarrolladores decidan el modo en que se renderizarán (o resguardo) sus fuentes web. según cuánto tarden en cargarse.

Diferencias en el procesamiento de fuentes en la actualidad

Las fuentes web permiten que los desarrolladores incorporen tipografía enriquecida en sus proyectos con la compensación de que, si el usuario aún no posee un tipo de letra el navegador debe dedicar algún tiempo a descargarlo. Debido a que las redes pueden es inestable, el tiempo de descarga puede afectar negativamente la inversión una experiencia fluida a los desarrolladores. Después de todo, a nadie le importará lo bonito que sea tu texto tarda muchísimo tiempo en aparecer.

Para mitigar parte del riesgo de una descarga lenta de la fuente, la mayoría de los navegadores implementan un tiempo de espera después del cual se usará una fuente de resguardo. Esta es una técnica útil, pero lamentablemente, los navegadores difieren en la implementación real.

• Chrome y Firefox tienen un tiempo de espera de tres segundos; transcurrido ese tiempo, se muestra el texto con la fuente de resguardo. Si la fuente logra descargarse, finalmente se realiza un intercambio y el texto se vuelve a representar con la fuente deseada.
• Internet Explorer tiene un tiempo de espera de cero segundos, lo que genera texto inmediato y procesamiento. Si la fuente solicitada aún no está disponible, se usa un resguardo. el texto se vuelve a representar más tarde una vez que la fuente solicitada está disponible.
• Safari no tiene un comportamiento de tiempo de espera (o al menos nada más allá de una red de referencia). tiempo de espera).

Para empeorar las cosas, los desarrolladores tienen un control limitado para decidir cómo estos reglas afectarán su aplicación. Es posible que un desarrollador que se preocupa por el rendimiento prefiera para tener una experiencia inicial más rápida que usa una fuente de reserva y solo aprovechar la fuente web más agradable en visitas posteriores después de que haya tenido la oportunidad de descargarse. Si usas herramientas como la API de Font Loading, es posible anular algunos de los comportamientos predeterminados del navegador y lograr un aumento del rendimiento, pero viene de escribir cantidades importantes de JavaScript, que luego se deben se intercalan en la página o se solicitan desde un archivo externo, lo que incurrirá en Latencia de HTTP.

Para solucionar esta situación, el Grupo de trabajo de CSS propuso un nuevo descriptor @font-face, font-display y una propiedad correspondiente para para controlar cómo se representa una fuente descargable antes de que se cargue por completo.

Cronograma de descarga de fuentes

Es similar a los comportamientos de tiempo de espera de fuentes existentes que implementan algunos navegadores. Hoy en día, font-display segmenta la duración de una descarga de fuente en tres segmentos en los períodos de prueba.

1. El primer período es el período de bloqueo de fuente. Durante este período, si la tipo de fuente no está cargado, cualquier elemento que intente usarla debe renderizarse con un tipo de fuente de resguardo invisible. Si el tipo de fuente se carga correctamente durante durante el período de bloqueo, el tipo de fuente se usa con normalidad.
2. El período de intercambio de fuente ocurre inmediatamente después del período de bloqueo de fuentes. Durante este período, si el tipo de fuente no se carga, cualquier elemento que intente usarlo debe renderizarse con un tipo de fuente de resguardo. Si el tipo de fuente es correcto, haz lo siguiente: se carga durante el período de intercambio, el tipo de fuente se usa con normalidad.
3. El período de error de fuente ocurre inmediatamente después de período de intercambio de fuentes. Si el tipo de fuente aún no se cargó cuando comienza este período, se marca como una carga con errores, lo que provoca un resguardo de fuente normal. De lo contrario, la fuente se usa normalmente.

Si comprendes estos períodos, podrás usar font-display para decidir cómo se comportan La fuente debe renderizarse según si se descargó o cuándo se descargó.

¿Qué tipo de pantalla es la adecuada para ti?

Para trabajar con el descriptor font-display, agrégalo a tus reglas at-rules de @font-face:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Actualmente, font-display admite el siguiente rango de valores: auto | block | swap | fallback | optional.

automático

auto usa la estrategia de visualización de fuente que utiliza el usuario-agente. La mayoría de los navegadores actualmente tienen una estrategia predeterminada similar a block.

bloquear

block le asigna al tipo de fuente un breve período de bloqueo (se recomiendan 3 s en la mayoría de los casos). y un período de intercambio infinito. En otras palabras, el navegador dibuja "invisible" texto al principio si la fuente no está cargada, pero intercambia el tipo de fuente no bien . Para ello, el navegador crea un tipo de fuente anónimo con métricas similar a la fuente seleccionada, pero todos los glifos no contienen “tinta”. Este valor solo debe usarse si se renderiza texto en un tipo de letra en particular es necesaria para que la página se pueda usar.

Cambio

swap le da al tipo de fuente un período de bloqueo de cero segundos y un período de intercambio infinito. Esto significa que el navegador muestra el texto de inmediato con un resguardo si el tipo de fuente no se carga, pero intercambia el tipo de fuente en cuanto se carga. De manera similar a block, este valor solo debe usarse cuando se renderiza texto en una fuente determinada importante para la página, pero la renderización en cualquier fuente generará de todas formas para transmitir tu mensaje. El texto del logotipo es un buen candidato para el intercambio, ya que muestra un nombre de la empresa con un resguardo razonable transmitirá el mensaje, pero finalmente, utilizaremos el tipo de letra oficial.

resguardo

fallback le da al tipo de fuente un período de bloqueo extremadamente pequeño (100 ms o menos es se recomienda en la mayoría de los casos) y un breve período de intercambio (se recomiendan tres segundos) en la mayoría de los casos). En otras palabras, el tipo de fuente se renderiza con un resguardo en primero si no está cargado, pero la fuente se cambia en cuanto se carga. Sin embargo, Si transcurre demasiado tiempo, el resguardo se usará para el resto de la página a lo largo de su vida útil. fallback es un buen candidato para elementos como el texto del cuerpo donde que el usuario empiece a leer lo antes posible y no quiere interrumpir su experiencia cambiando el texto a medida que se carga una fuente nueva.

opcional

opcional asigna al tipo de fuente un período de bloqueo extremadamente pequeño (100 ms o menos se recomendado en la mayoría de los casos) y un período de intercambio de cero segundos. Al igual que con el resguardo, esta es una buena opción cuando la fuente que se descarga es más "deseable" pero no son fundamentales para la experiencia. El valor optional lo deja en manos de navegador para decidir si desea iniciar la descarga de la fuente, y puede elegir que no o puede hacerlo con una prioridad baja, según lo que creas que sería lo mejor para el usuario. Esto puede ser beneficioso en situaciones en las que el usuario se encuentre en un una conexión débil y extraer una fuente puede no ser el mejor uso de los recursos.

Navegadores compatibles

font-display está actualmente detrás de la marca Funciones experimentales de la plataforma web en Chrome 49 de escritorio, y se enviará en Opera y Opera para Android.

Demostración

Echa un vistazo a la muestra para dar font-display hizo un tiro. Para los desarrolladores que se enfocan en el rendimiento, puede ser herramienta útil en tu cinturón de herramientas.