La propiedad font-stretch en CSS se usa para establecer el texto más ancho o más estrecho. Esta propiedad no funciona con ninguna fuente. Solo funciona cuando la familia de fuentes tiene una cara variante de ancho.
Sintaxis:
font-stretch: normal|ultra-condensed|extra-condensed|condensed| semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;
Valor por defecto:
- normal
Valores de propiedad:
- normal: es el tipo de letra predeterminado. No estira la fuente.
- ultracondensado: se utiliza para especificar un tipo de letra más condensado de lo normal.
- extracondensado: se utiliza para configurar el texto más estrecho que el normal y no más estrecho que el ultracondensado.
- condensado: se utiliza para configurar el texto más estrecho que semicondensado y no más estrecho que extracondensado.
- semi-condensado: se utiliza para configurar el texto más estrecho que el normal y no más estrecho que el semi-condensado.
- semiexpandido: se utiliza para configurar el texto más ancho de lo normal, pero no más ancho que expandido.
- expandido: se usa para configurar el texto más ancho que semi-expandido, pero no más ancho que extra-expandido.
- extraexpandido: se utiliza para configurar el texto más ancho que expandido, pero no más ancho que ultraexpandido.
- ultraexpandido: se utiliza para configurar el texto más ancho que ultraexpandido.
Ejemplo:
html
<!--HTML code to illustrate font-stretch
Property -->
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>
<style>
.normal {
font-stretch: normal;
}
.ultra_condensed {
font-stretch: ultra-condensed;
}
.extra_condensed {
font-stretch: extra-condensed;
}
.condensed {
font-stretch: condensed;
}
.extra_condensed {
font-stretch: extra-condensed;
}
.semi_expanded {
font-stretch: semi-expanded;
}
.expanded {
font-stretch: expanded;
}
.extra_expanded {
font-stretch: extra-expanded;
}
.ultra_expanded {
font-stretch: ultra-expanded;
}
</style>
</head>
<body>
<div class = "normal">
GeeksforGeeks: A computer science portal
</div>
<div class = "ultra_condensed">
GeeksforGeeks: A computer science portal
</div>
<div class = "extra_condensed">
GeeksforGeeks: A computer science portal
</div>
<div class = "condensed">
GeeksforGeeks: A computer science portal
</div>
<div class = "extra_condensed">
GeeksforGeeks: A computer science portal
</div>
<div class = "semi_expanded">
GeeksforGeeks: A computer science portal
</div>
<div class = "expanded">
GeeksforGeeks: A computer science portal
</div>
<div class = "extra_expanded">
GeeksforGeeks: A computer science portal
</div>
<div class = "ultra_expanded">
GeeksforGeeks: A computer science portal
</div>
</body>
</html>
Producción:
Nota: esta propiedad no funcionará en ninguna fuente.
Navegadores compatibles: los navegadores compatibles con la propiedad font-stretch se enumeran a continuación:
- Google Chrome 60.0 y superior
- Borde 12.0 y superior
- Internet Explorer 9.0 y superior
- Firefox 9.0 y superior
- Ópera 47.0 y superior
- Safari 11.0 y superior
Publicación traducida automáticamente
Artículo escrito por A_K_Mishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA