La función font-size-adjust de CSS ahora está en Baseline

Navegadores compatibles

  • 127
  • 127
  • 3
  • 16.4

Origen

La propiedad font-size-adjust del CSS ya está disponible en Chrome. y pasa a formar parte de Baseline Newly Disponible. Esta propiedad puede ayudar a evitar el cambio de diseño cuando se cargan las fuentes de resguardo y garantizar la legibilidad de las fuentes de resguardo en tamaños de fuente más pequeños. El font-size-adjust es parte de Interoperabilidad 2024, Esta es otra ventaja del esfuerzo por mejorar la interoperabilidad del plataforma web estándar.

El problema

Cuando comparas dos fuentes del mismo tamaño, según la forma y el tamaño de los glifos, el texto que se muestra puede ocupar un espacio muy diferente. A modo de ejemplo, la siguiente demostración muestra texto en Verdana y Arial, establecidos en 16 píxeles.

Texto que se muestra a 16 px en Verdana y Arial.

La diferencia en el tamaño se debe al hecho de que el valor de aspecto, la altura de las letras minúsculas en comparación con las letras mayúsculas en una fuente varía según la fuente.

Esto puede causar dos problemas cuando se utiliza una fuente con un valor de aspecto diferente. como resguardo. Primero, cambiará el espacio que ocupa la fuente. En segundo lugar, la fuente preferida puede ser menos legible que la que se especificó por primera vez, especialmente en tamaños de fuente pequeños. Esto se debe a que el la altura relativa de las letras minúsculas a las mayúsculas es un factor clave en la legibilidad.

Para qué sirve font-size-adjust

La propiedad font-size-adjust te permite ajustar la fuente de resguardo para que sea mejor coinciden con la primera fuente. En el siguiente ejemplo, se muestran las dos fuentes que se muestran anteriormente, esta vez la segunda fuente se ajustó para que coincida con la primera.

Usa font-size-adjust.

En este ejemplo se usa un valor único, un número, que ajusta las fuentes usando el atributo métrica de fuente predeterminada de ex-height. Esta es la proporción entre la altura x, la altura de una x minúscula en el tamaño de la fuente También puedes especificar la fuente métrica utilizada. En el siguiente ejemplo, normalicé las fuentes con la ch-width, además del número.

Usa font-size-adjust con la métrica de fuente ch-width.

Para ver todos los valores posibles, consulta Documentación de MDN para font-size-adjust

Vale la pena revisar tu sitio con la fuente de reserva y comprobar si hay ajustar con font-size-adjust puede ayudar a los lectores que usan la fuente de resguardo tengan una mejor experiencia, especialmente ahora que está disponible en todas partes.