Propiedad CSS font-size-adjust

La propiedad font-size-adjust controla cómo se calcula el tamaño de la fuente cuando se utiliza una fuente de respaldo. Garantiza que la x-height de la fuente de respaldo coincida con la de la fuente principal, manteniendo una legibilidad consistente.

La propiedad font-size-adjust es una propiedad de CSS2.1.

Todas las fuentes tienen un "valor de aspecto", que es la relación entre la x-height y la em-height. Este valor se puede encontrar en la documentación de la fuente o calcular mediante herramientas en línea. Por ejemplo, Georgia tiene un valor de aspecto de aproximadamente 0.52, mientras que Verdana es de alrededor de 0.58.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredable	Sí.
Animable	Sí.
Versión	CSS2.1
Sintaxis DOM	object.style.fontSizeAdjust = "0.5";

Nota: font-size-adjust se considera obsoleta para el desarrollo web moderno. Firefox eliminó el soporte en la versión 119 (2023), y nunca ha sido compatible con Chrome, Safari o Edge. Para alternativas modernas, considere usar font-optical-sizing o ajustar manualmente font-size con consultas de medios.

Sintaxis

Sintaxis de la propiedad CSS font-size-adjust

css

font-size-adjust: number | none | initial | inherit;

Ejemplo de la propiedad font-size-adjust:

Ejemplo de la propiedad CSS font-size-adjust con valor numérico

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div.a {
        font-family: Georgia, Verdana, sans-serif;
      }
      div.b {
        font-family: Verdana, Georgia, sans-serif;
      }
      #box-one,
      #box-two {
        font-size-adjust: 0.52;
      }
    </style>
  </head>
  <body>
    <h1>Font-size-adjust property example</h1>
    <h2>Two divs with the same font-size-adjust property:</h2>
    <div id="box-one" class="a">
      This demonstrates how the primary font renders when available.
    </div>
    <div id="box-two" class="b">
      Here the fallback font takes precedence in the font stack.
    </div>
    <h2>Two divs without the font-size-adjust property:</h2>
    <div class="a">
      Without adjustment, the fallback font may appear significantly larger or smaller.
    </div>
    <div class="b">
      The font-size-adjust property ensures visual consistency across different typefaces.
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
none	Sin ajuste de tamaño de fuente. Este es el valor predeterminado de la propiedad.
number	Un número positivo que representa la relación de aspecto (x-height dividido por em-height).
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Compatibilidad con navegadores

Navegador	Compatibilidad
Chrome	Sin compatibilidad
Firefox	1.5–118 (eliminado en v119)
Safari	Sin compatibilidad
Edge	Sin compatibilidad
Opera	Sin compatibilidad

Práctica

¿Cuál es la función principal de la propiedad 'font-size-adjust' en CSS?

Controla el grosor de una fuente.Preserva la x-height de una fuente y asegura que no se distorsione al cambiarla.Ajusta el color de la fuente.Asegura que se preserve la legibilidad de las letras minúsculas cuando se cambia la fuente.Redimensiona la fuente para que se ajuste al ancho de la ventana gráfica.

Propiedad CSS font-size-adjust ​

Sintaxis ​

Ejemplo de la propiedad font-size-adjust: ​

Valores ​