Características font-stretch en CSS

Características font-stretch en CSS

La propiedad font-stretch CSS selecciona una versión estrecha (condensada), normal o extendida (expandida) de la fuente.

Funciones font-stretch css

Valor inicialnormal
Aplicado aTodos los artículos.
Heredable
Móvil
Valor calculadoComo se especificó.
/* Palabras reservadas */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
/* Valores globales */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

Esta función no cambia las dimensiones de la fuente, sino que es una forma de elegir la mejor versión de la fuente si la fuente proporciona más de una versión. Si la fuente no tiene versiones expandidas o estrechas, como la famosa fuente Time New Roman, la función no tendrá font-stretch ningún efecto visible.

Ejemplos y aplicaciones en código

Ejemplo de uso de la propiedad font-stretch con varios valores:

< div  Class = "ultra stretch" > Este es el texto con la línea extendida también </ div > 
< div  Class = "stretch" > Este es el texto con la línea extendida </ div > 
< div  Class = "normal" > Este es el texto sin extensión de línea </ div > 
< div  class = "condensed" > este es el texto con una línea condensada </ div > 
< div  class = "ultra condensed" >Este es el texto con la fuente muy condensada </ div 

Código CSS:

.ultra.stretch   { font-stretch: ultra-expanded; }
.stretch         { font-stretch: expanded; } 
.normal          { font-stretch: normal; }
.condensed       { font-stretch: condensed; }
.ultra.condensed { font-stretch: ultra-condensed; }

Asegúrese de probar el ejemplo anterior con una fuente que tenga más de una copia para que esta característica tenga efecto.

Soporte de navegadores

CaracterísticaChromeFirefoxIEOperaSafari
Soporte básico48.09.09.035.011

Características generales

La propiedad acepta font-stretch uno de los siguientes valores

normal

Defina la versión normal de la fuente.

semi-condensed / condensed / extra-condensed / ultra-condensed

Seleccionar una versión más estrecha que la versión normal resultará ultra-condensed  en elegir la versión más estrecha de la fuente.

semi-expanded / expanded / extra-expanded / ultra-expanded

Seleccionar una versión más ultra-expanded  extendida que la versión normal resultará en elegir la versión más extendida de la fuente.

Estructura font-stretch css

font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;

Consulte también

  • La página de propiedades font que establece los valores de la font-stylefont-weightfont-sizefont-size-adjustline-height.
  • La página de propiedades color que establece el valor de color de los elementos.