Acerca de este problema de CSS
La propiedad font-stretch selecciona una variante normal, condensada o expandida de una familia tipográfica. Sus valores de palabra clave válidos son ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. También acepta valores de porcentaje (por ejemplo, 50% a 200%). El valor bold no encaja en ninguna de estas categorías porque describe el peso de la fuente (grosor de los trazos), no el ancho de la fuente (qué tan estrechos o anchos son los caracteres).
Este error suele ocurrir debido a uno de estos dos errores:
-
Confundir
font-stretchconfont-weight: Querías hacer el texto en negrita pero accidentalmente usaste la propiedad incorrecta. -
Error tipográfico o de copiar y pegar en la forma abreviada
font: Al escribir declaraciones de fuente abreviadas, las diversas subpropiedades pueden mezclarse fácilmente.
El validador de W3C marca esto porque los navegadores ignorarán los valores CSS inválidos, lo que significa que tu estilo previsto no se aplicará. Solucionarlo garantiza que tus estilos funcionen como esperas en todos los navegadores y pasen la validación.
Cómo solucionarlo
-
Si quieres texto en negrita, usa
font-weight: bold(o valores numéricos como700). -
Si quieres caracteres más anchos o más estrechos, usa
font-stretchcon un valor válido comocondensedoexpanded. -
Si necesitas ambos, aplica cada propiedad por separado o usa la forma abreviada
fontcorrectamente.
Ejemplos
Incorrecto: usar bold con font-stretch
Esto desencadena el error de validación porque bold no es un valor válido para font-stretch:
<p style="font-stretch: bold;">Este texto no se renderizará como se espera.</p>
Solucionado: usar font-weight para negrita
Si la intención era hacer el texto en negrita, cambia a font-weight:
<p style="font-weight: bold;">Este texto está en negrita.</p>
Solucionado: usar font-stretch correctamente para el ancho
Si la intención era ajustar el ancho del carácter, usa un valor válido de font-stretch:
<p style="font-stretch: expanded;">Este texto usa una variante tipográfica expandida.</p>
Usar ambas propiedades juntas
Puedes combinar font-weight y font-stretch cuando necesites tanto texto en negrita como un ancho de fuente diferente:
<style>
.styled-text {
font-weight: bold;
font-stretch: condensed;
font-family: Arial, sans-serif;
}
</style>
<p class="styled-text">Este texto está en negrita y condensado.</p>
Referencia de valores válidos para font-stretch
Aquí tienes una descripción general de todos los valores de palabra clave válidos para font-stretch:
<style>
.condensed { font-stretch: condensed; }
.normal-width { font-stretch: normal; }
.expanded { font-stretch: expanded; }
.custom-width { font-stretch: 75%; }
</style>
<p class="condensed">Texto condensado</p>
<p class="normal-width">Texto de ancho normal</p>
<p class="expanded">Texto expandido</p>
<p class="custom-width">Texto al 75% de ancho</p>
Ten en cuenta que font-stretch solo funciona si la familia tipográfica seleccionada incluye variantes condensadas o expandidas. Si la fuente no tiene estas variaciones, la propiedad no tendrá ningún efecto visible incluso con valores válidos.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: