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 inicial	`normal`
Aplicado a	Todos los artículos.
Heredable	Sí
Móvil	Sí
Valor calculado	Como 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ística	Chrome	Firefox	IE	Opera	Safari
Soporte básico	48.0	9.0	9.0	35.0	11

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-style, font-weight, font-size, font-size-adjust y line-height.
La página de propiedades color que establece el valor de color de los elementos.