Skip to main content
Validación HTML

CSS: “font-stretch”: “bold” no es un valor válido para “font-stretch”.

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:

  1. Confundir font-stretch con font-weight: Querías hacer el texto en negrita pero accidentalmente usaste la propiedad incorrecta.
  2. 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 como 700).
  • Si quieres caracteres más anchos o más estrechos, usa font-stretch con un valor válido como condensed o expanded.
  • Si necesitas ambos, aplica cada propiedad por separado o usa la forma abreviada font correctamente.

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.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.