Propiedad font-stretch de CSS
La propiedad font-stretch hace que el texto sea más ancho o más estrecho.
Esta propiedad es una de las propiedades de CSS3.
¡La propiedad font-stretch no funciona con cualquier fuente! Solo funciona si la familia de fuentes tiene variantes de ancho. La propiedad font-stretch por sí sola no estira una fuente.
Esta propiedad tiene los siguientes valores:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
- 50% to 200%
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | No |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontStretch = "expanded"; |
Sintaxis
Sintaxis de la propiedad font-stretch de CSS
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;Ejemplo de la propiedad font-stretch:
Ejemplo de la propiedad CSS font-stretch con valores ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial e inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 4em;
font-family: 'Myriad Pro';
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">A</span>
<span style="font-stretch: extra-condensed">A</span>
<span style="font-stretch: condensed">A</span>
<span style="font-stretch: semi-condensed">A</span>
<span style="font-stretch: normal">A</span>
<span style="font-stretch: semi-expanded">A</span>
<span style="font-stretch: expanded">A</span>
<span style="font-stretch: extra-expanded">A</span>
<span style="font-stretch: ultra-expanded">A</span>
</p>
</body>
</html>Selección de la cara de la fuente
La cara seleccionada para el valor de la propiedad font-stretch depende de las caras que soporte la fuente en cuestión. Si la fuente no proporciona una cara que coincida con el valor dado, los valores menores del 100 % se asignan a una cara más estrecha, y los valores mayores o iguales al 100 % se asignan a una más ancha.
Valores
| Valor | Descripción |
|---|---|
| ultra-condensed | Estrecha el texto al máximo. |
| extra-condensed | Estrecha el texto considerablemente, pero no tanto como ultra-condensed. |
| condensed | Estrecha el texto moderadamente, pero no tanto como extra-condensed. |
| semi-condensed | Estrecha el texto ligeramente, pero no tanto como condensed. |
| normal | No se aplica ningún estiramiento. Este es el valor predeterminado. |
| semi-expanded | Expande el texto ligeramente más ancho que normal. |
| expanded | Expande el texto moderadamente más ancho que semi-expanded. |
| extra-expanded | Expande el texto considerablemente más ancho que expanded. |
| ultra-expanded | Expande el texto al máximo. |
| 50% to 200% | Valores numéricos que representan el factor de estiramiento. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad del elemento principal. |
Práctica
¿Qué hace la propiedad CSS 'font-stretch'?