Características font-size-adjust en CSS

Características font-size-adjust en CSS

La propiedad font-size-adjust en CSS dice que el tamaño de fuente debe elegirse en función de la altura de las minúsculas en lugar de la altura de las letras mayúsculas. Esto es útil porque la legibilidad de las fuentes, especialmente si son de tamaño pequeño, estarán determinadas por el tamaño de las letras minúsculas, no mayúsculas.

Funciones font-size-adjust css

Valor inicialnone
Aplicado aTodos los artículos.
Heredable
Móvil
Valor calculadoComo se especificó.
/* Usa el tamaño de fuente especificado */ 
font-size-adjust:  none;
/* El uso de un tamaño de fuente hará que las letras minúsculas sean la mitad de la altura del tamaño de fuente especificado */ 
font-size-adjust:  0 . 5;
/* valores globales */ 
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad font-size-adjust para mostrar la fuente en un tamaño adecuado, incluso si es pequeña:

< p > Ejemplo: font-size-ajustar </ p > 
< br > 
< div  class="times" >
 Times (10px) Esta fuente es 
 Que es difícil de leer en tamaño pequeño.
</ div > 
< p > 
< div  class = "verdana" > 
 Verdana (10px) Esta es la fuente
 sans - fuente serif que es mucho más clara, porque es una fuente 
</ div > 
< br > 
< p > Ahora vamos a hacer la edición: </ p > 
< p > 
< div  clase = "adjtimes" >  
 Fuente 10px Times
 Verdana ha cambiado de tamaño para que sea el mismo que la fuente
 Fabuloso, ¿no? 
</ div >

Código CSS:

.times {
    font-family: Times, serif;
    font-size: 10px;
}
.verdana {
    font-family: Verdana, sans-serif;
    font-size: 10px;
}
.adjtimes {
    font-family: Times, sans-serif; 
    font-size-adjust: 0.58;
    font-size: 10px;
}

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico43,0 *3,0No soportado30,0 *No soportado

* La aplicación de esta función a los navegadores Chrome y Opera aún es experimental, y la opción «Habilitar funciones experimentales de la plataforma web» debe estar activada chrome://flags o desactivada opera://flags. A diferencia de IE, el navegador Edge admite esta función.

Características generales

La propiedad acepta font-size-adjustuno de los dos valores siguientes.

none

Elija el tamaño de fuente según la propiedad font-size únicamente.

<number>

Elija el tamaño de fuente para que la altura de las minúsculas (que se especifica por la altura x de la fuente utilizada) sea igual al producto de multiplicar este valor por el valor de la propiedad font-size.

Este valor generalmente debe ser la relación entre la altura x y el tamaño de la primera fuente utilizada en la propiedad font-family, lo que significa que la primera fuente será del mismo tamaño en todos los navegadores, admitan font-size-adjust o no la función .

Estructura font-size-adjust css

font-size-adjust: none | <number>;

Consulte también

  • La página de propiedades font que establece los valores de las font-style subpropiedades font-weightfont-size y line-height.
  • La página de propiedades color que establece el valor de color de los elementos.