
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 lafont-style
,font-weight
,font-size
,font-size-adjust
yline-height
. - La página de propiedades
color
que establece el valor de color de los elementos.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS