Acerca de este problema HTML
La propiedad font-size define el tamaño del texto en CSS y acepta un conjunto específico de tipos de valores. Cuando el validador W3C informa que un valor “no es un valor font-size“, significa que el valor que proporcionaste no coincide con ninguno de los formatos aceptados. Los navegadores pueden intentar ignorar o adivinar lo que quisiste decir, pero esto lleva a una representación impredecible en diferentes navegadores y dispositivos.
Este error ocurre comúnmente por algunas razones:
-
Faltan unidades en valores numéricos. Escribir
font-size: 16en lugar defont-size: 16px. En CSS, los números sin unidad (excepto0) no son longitudes válidas. -
Errores tipográficos en unidades o palabras clave. Por ejemplo,
font-size: 16xp,font-size: 1.2erm, ofont-size: lage. -
Usar valores de la propiedad incorrecta. Por ejemplo,
font-size: bold(que pertenece afont-weight) ofont-size: center. -
Sintaxis inválida o no soportada. Por ejemplo,
font-size: 16 px(con un espacio entre el número y la unidad) ofont-size: auto(que no es válido para esta propiedad).
Tipos de valores válidos para font-size
| Tipo | Ejemplos | Notas |
|---|---|---|
| Palabras clave absolutas |
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large |
Tamaños definidos por el navegador |
| Palabras clave relativas |
smaller, larger |
Relativo al tamaño de fuente del elemento padre |
| Unidades de longitud |
16px, 1.2em, 0.9rem, 12pt, 1vw |
Deben incluir una unidad (excepto 0) |
| Porcentajes |
100%, 120%, 80% |
Relativo al tamaño de fuente del elemento padre |
| Funciones matemáticas |
calc(1rem + 2px), clamp(1rem, 2vw, 3rem) |
Expresiones matemáticas CSS que resuelven a una longitud |
Ejemplos
Incorrecto: falta unidad en un número
<p style="font-size: 16;">Esto provoca un error de validación.</p>
El valor 16 no es válido porque carece de una unidad CSS. Los navegadores pueden ignorar esta declaración completamente, dejando el texto en su tamaño predeterminado o heredado.
Correcto: número con una unidad válida
<p style="font-size: 16px;">Este texto tiene un tamaño de fuente válido.</p>
Incorrecto: error tipográfico en la unidad
<p style="font-size: 1.2erm;">Error tipográfico en la unidad.</p>
Correcto: unidad em apropiada
<p style="font-size: 1.2em;">Unidad em correcta.</p>
Incorrecto: valor de la propiedad incorrecta
<p style="font-size: bold;">Bold no es un valor font-size.</p>
Correcto: usar una palabra clave válida
<p style="font-size: large;">Usando una palabra clave de tamaño válida.</p>
Incorrecto: espacio entre número y unidad
<p style="font-size: 16 px;">El espacio antes de la unidad es inválido.</p>
Correcto: sin espacio entre número y unidad
<p style="font-size: 16px;">Sin espacio entre número y unidad.</p>
Ejemplo de documento completo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Size Example</title>
<style>
.heading {
font-size: 2rem;
}
.body-text {
font-size: 1em;
}
.small-print {
font-size: 80%;
}
.responsive {
font-size: clamp(1rem, 2.5vw, 2rem);
}
</style>
</head>
<body>
<h1 class="heading">Valid heading size</h1>
<p class="body-text">Body text at 1em.</p>
<p class="small-print">Small print at 80%.</p>
<p class="responsive">Responsive text using clamp().</p>
</body>
</html>
Para resolver este error de validación, revisa cada declaración font-size en tu CSS o estilos en línea. Asegúrate de que cada valor sea una palabra clave reconocida, un número inmediatamente seguido por una unidad válida, un porcentaje o una función CSS soportada como calc(). Si tenías la intención de usar 0, ese es el único valor numérico que no requiere una unidad — font-size: 0 es válido, aunque raramente útil en la práctica.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.