Propiedad CSS font-stretch
La propiedad CSS font-stretch hace el texto más estrecho o más ancho. Aprende todos los valores y prueba los ejemplos tú mismo.
La propiedad CSS font-stretch selecciona una cara más estrecha o más ancha de la fuente actual, lo que permite condensar o expandir el texto sin cambiar su font-size ni su font-weight. Es una de las propiedades CSS3.
Lo fundamental que hay que entender es que font-stretch no estira los glifos como lo haría una transformación. Solo selecciona una cara de anchura alternativa que la fuente ya incluye. Si la font-family no tiene caras de anchura variable, la propiedad no tiene ningún efecto visible y el texto permanece con su anchura normal. Por eso solo verás un resultado con fuentes que incluyan variantes condensadas o expandidas (por ejemplo, Myriad Pro, Roboto Condensed o una fuente variable con un eje wdth).
Cuándo usarla
Utiliza font-stretch cuando:
- Estés usando una familia tipográfica que proporciona múltiples caras de anchura y quieras que el navegador seleccione la correcta (en lugar de importar cada cara con un nombre
font-familyseparado). - Estés trabajando con una fuente variable que expone un eje de anchura (
wdth) — los valores en porcentaje se asignan directamente a ese eje.
Para texto cotidiano donde la fuente tiene una sola anchura, font-stretch no hace nada, por lo que no debes usarla como alternativa para ajustar texto dentro de un contenedor.
Nota: En la última especificación de CSS Fonts,
font-stretchha sido renombrada afont-width. Los navegadores siguen aceptandofont-stretchcomo alias, por lo que el nombre de la propiedad en este capítulo sigue siendo válido en todas partes.
Valores
font-stretch acepta una palabra clave o un porcentaje. Cada palabra clave tiene un porcentaje equivalente:
| Palabra clave | Porcentaje |
|---|---|
| ultra-condensed | 50% |
| extra-condensed | 62.5% |
| condensed | 75% |
| semi-condensed | 87.5% |
| normal | 100% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
Los porcentajes ofrecen un control más preciso: se permite cualquier valor entre 50% y 200%, y en una fuente variable puedes usar valores intermedios como 90% o 133%. Los valores por debajo del 100% son más estrechos que lo normal; los valores por encima del 100% son más anchos.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredada | No |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontStretch = "expanded"; |
Sintaxis
Sintaxis de la propiedad CSS font-stretch
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
El siguiente ejemplo aplica cada palabra clave a la misma letra. Recuerda que solo verás una diferencia si la fuente renderizada (Myriad Pro en este caso, con una alternativa del sistema) proporciona realmente esas caras de anchura.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 4em;
font-family: 'Myriad Pro', sans-serif;
}
</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>Uso de un porcentaje con una fuente variable
Con una fuente variable que expone un eje de anchura puedes solicitar cualquier valor en el rango 50%–200%, incluidos valores intermedios:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: 'Roboto Flex', sans-serif;
font-size: 2em;
}
.narrow { font-stretch: 75%; }
.normal { font-stretch: 100%; }
.wide { font-stretch: 150%; }
</style>
</head>
<body>
<p class="narrow">Condensed text (75%)</p>
<p class="normal">Normal text (100%)</p>
<p class="wide">Expanded text (150%)</p>
</body>
</html>Cómo se selecciona la cara
La cara elegida para un valor font-stretch dado depende de las caras de anchura que la fuente incluye. Cuando ninguna cara coincide exactamente con el valor solicitado, el navegador recurre a la más cercana: los valores por debajo del 100% se asignan a la cara más estrecha disponible, y los valores del 100% o superiores se asignan a la cara más ancha disponible.
Descripción de los valores
| Valor | Descripción |
|---|---|
| ultra-condensed | Estrecha el texto al máximo (50%). |
| extra-condensed | Estrecha el texto significativamente, pero no tanto como ultra-condensed (62.5%). |
| condensed | Estrecha el texto moderadamente, pero no tanto como extra-condensed (75%). |
| semi-condensed | Estrecha el texto ligeramente, pero no tanto como condensed (87.5%). |
| normal | No se selecciona ninguna cara alternativa. Este es el valor predeterminado (100%). |
| semi-expanded | Expande el texto ligeramente más que normal (112.5%). |
| expanded | Expande el texto moderadamente más que semi-expanded (125%). |
| extra-expanded | Expande el texto significativamente más que expanded (150%). |
| ultra-expanded | Expande el texto al máximo (200%). |
| 50% a 200% | Un porcentaje que representa el factor de estiramiento; por debajo del 100% es más estrecho, por encima es más ancho. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad del elemento padre. |
Propiedades relacionadas
- font-weight — selecciona el grosor de la cara de la fuente.
- font-style — selecciona caras normales, itálicas u oblicuas.
- font-variant — controla las versalitas y otros glifos alternativos.
- font-family — declara qué fuente (y sus caras) utilizar.
- font — el atajo para establecer varias propiedades de fuente a la vez.