Skip to main content
Validación HTML

CSS: “font-weight”: “X” no es un valor de “font-weight”.

Acerca de este problema de CSS

La propiedad font-weight controla el grosor o la intensidad de los caracteres del texto. A diferencia de muchas otras propiedades CSS, no acepta unidades de longitud como px, em o %. En su lugar, utiliza un conjunto específico de palabras clave o valores numéricos sin unidades para indicar el peso deseado. Proporcionar un valor no reconocido hace que la declaración sea ignorada por el navegador, lo que significa que tu estilo previsto no se aplicará, y el texto volverá al peso heredado o predeterminado.

Los valores aceptados para font-weight son:

  • Palabras clave: normal (equivalente a 400), bold (equivalente a 700), bolder (relativo, un paso más grueso que el padre), lighter (relativo, un paso más ligero que el padre).
  • Valores numéricos: Cualquier número del 1 al 1000. Históricamente solo los múltiplos de 100 (100 a 900) eran válidos, pero la especificación CSS Fonts Level 4 amplió esto a cualquier valor en el rango 11000. Ten en cuenta que muchos validadores y navegadores más antiguos pueden aún reconocer solo los múltiplos 100900.

Esto importa para el cumplimiento de estándares y el renderizado predecible. Un valor font-weight inválido es descartado silenciosamente por los navegadores, lo que puede llevar a resultados visuales confusos — especialmente cuando esperas un peso específico de una fuente variable o una familia de fuentes con múltiples pesos.

Para solucionar este problema, identifica el valor inválido en tu CSS y reemplázalo con uno de los valores aceptados listados arriba. Si estabas usando un valor en píxeles u otra unidad, simplemente quita la unidad y elige un peso numérico apropiado. Si usaste una palabra clave mal escrita (por ejemplo, bolded o heavy), reemplázala con la palabra clave correcta.

Ejemplos

Incorrecto: usar una unidad de longitud

p {
  font-weight: 20px;
}

El validador reporta esto porque 20px no es un valor font-weight válido. La propiedad no acepta unidades de longitud.

Incorrecto: usar una palabra clave inválida

h2 {
  font-weight: heavy;
}

La palabra clave heavy no es reconocida por la especificación CSS para font-weight.

Correcto: usar valores numéricos válidos

p {
  font-weight: 300;
}

h2 {
  font-weight: 700;
}

Correcto: usar palabras clave válidas

p {
  font-weight: lighter;
}

h2 {
  font-weight: bold;
}

Ejemplo HTML completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weight Example</title>
  <style>
    .light {
      font-weight: 300;
    }
    .regular {
      font-weight: normal;
    }
    .semi-bold {
      font-weight: 600;
    }
    .bold {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p class="light">This text uses a light font weight (300).</p>
  <p class="regular">This text uses a normal font weight (400).</p>
  <p class="semi-bold">This text uses a semi-bold font weight (600).</p>
  <p class="bold">This text uses a bold font weight (700).</p>
</body>
</html>

Referencia rápida de pesos numéricos comunes

Valor Nombre típico
100 Fino
200 Extra ligero
300 Ligero
400 Normal / Regular
500 Medio
600 Semi negrita
700 Negrita
800 Extra negrita
900 Negro

Ten en cuenta que el efecto visual real de un peso numérico depende de si la familia de fuentes cargada proporciona un peso coincidente. Si una fuente solo incluye pesos 400 y 700, el navegador mapeará otros valores al peso disponible más cercano.

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.