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 a400),bold(equivalente a700),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
1al1000. Históricamente solo los múltiplos de 100 (100a900) eran válidos, pero la especificación CSS Fonts Level 4 amplió esto a cualquier valor en el rango1–1000. Ten en cuenta que muchos validadores y navegadores más antiguos pueden aún reconocer solo los múltiplos100–900.
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.
Más información: