Ajuste de tamaño de fuente - Trucos CSS

Anonim

Esta propiedad brinda a los desarrolladores la capacidad de establecer el font-sizetamaño de un elemento según el tamaño de sus letras minúsculas, en lugar de las letras mayúsculas.

.element ( font-size: 22px; font-size-adjust: .5; )

En este caso las letras minúsculas de la fuente serían de 11px de alto, ya que 22 x .5 = 11.

Al cargar fuentes, es probable que haya una relación de aspecto diferente entre las letras minúsculas de una fuente alternativa y la tipografía recién cargada, por lo que font-size-adjustes útil controlar la cantidad de reflujo cuando declaramos una nueva font-familyy vemos el destello de texto sin estilo (FOUT).

En la siguiente demostración, es posible activar y desactivar esta propiedad para mostrar cómo una fuente web como Chaparral difiere de la altura x y la alineación de los caracteres en Times, la fuente alternativa. Pero cuidado, esta propiedad solo es compatible con una pequeña cantidad de navegadores en este momento.

Esto puede tener efectos dramáticos cuando se establece en grandes porciones del cuerpo del texto y mejorar sustancialmente el parpadeo que se produce al cambiar entre la reserva y la fuente recién cargada:

Más información

  • MDN
  • W3C

Soporte de 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
No 3 No No No

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
No No No No