Validación HTML: CSS: "font-size": "px" no es un valor de "font-size" válido.

Acerca de este problema de CSS

La propiedad font-size establece el tamaño del texto y espera un valor CSS válido — ya sea una palabra clave (como small, medium, large), un valor numérico con una unidad (como 16px, 1.2em, 100%), o 0 (que no necesita unidad). Cuando el validador reporta que "px" no es un valor font-size válido, significa que la propiedad recibió la cadena px sola, sin el número requerido que la preceda.

Este problema surge comúnmente en algunos escenarios:

Errores tipográficos o eliminación accidental: El número fue eliminado durante la edición, dejando solo la unidad.
Salida de plantilla o CMS: Un valor dinámico (por ejemplo, de una variable o campo de base de datos) se resolvió como vacío, produciendo algo como font-size: px;.
Errores de preprocesador: Una variable de Sass, Less u otro preprocesador CSS estaba indefinida o vacía, resultando en una unidad sin valor en el CSS compilado.

Aunque la mayoría de navegadores simplemente ignorarán la declaración inválida y recurrirán a un tamaño de fuente heredado o por defecto, esto crea un renderizado impredecible. El texto puede aparecer en un tamaño inesperado, y el comportamiento puede diferir entre navegadores. El CSS inválido también causa fallos en la validación del W3C, lo que puede señalar problemas más profundos en tu código o pipeline de construcción.

Cómo solucionarlo

Busca un número faltante: Examina la declaración font-size marcada por el validador y añade el valor numérico deseado antes de la unidad.
Inspecciona valores dinámicos: Si el valor proviene de una variable, motor de plantillas o campo de CMS, asegúrate de que genere un valor completo (por ejemplo, 16 o 16px) en lugar de una cadena vacía.
Usa un valor de respaldo: Al generar CSS dinámicamente, considera proporcionar un valor de respaldo en caso de que la variable esté vacía.

Ejemplos

❌ Incorrecto: Unidad sin número

<p style="font-size: px;">Este texto tiene un tamaño de fuente inválido.</p>

El validador reportará que "px" no es un valor font-size válido porque ningún número precede a la unidad.

✅ Correcto: Valor numérico con unidad

<p style="font-size: 16px;">Este texto tiene un tamaño de fuente válido.</p>

❌ Incorrecto: Valor vacío de una variable de plantilla

Este es un patrón común en sistemas de plantillas que puede producir CSS inválido:

<p style="font-size: px;">Contenido dinámico aquí.</p>

Cuando la variable de plantilla se resuelve como una cadena vacía, solo queda px.

✅ Correcto: Usando un valor de palabra clave

Si no necesitas un tamaño específico en píxeles, las palabras clave de CSS son otra opción válida:

<p style="font-size: medium;">Esto usa un tamaño de fuente de palabra clave.</p>

✅ Correcto: Usando otras unidades válidas

La propiedad font-size acepta muchos tipos de unidades. Todas estas son válidas:

<style>
  .example-em { font-size: 1.2em; }
  .example-rem { font-size: 1rem; }
  .example-percent { font-size: 120%; }
  .example-px { font-size: 14px; }
  .example-keyword { font-size: large; }
</style>

✅ Correcto: Ejemplo de documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Font Size Example</title>
  <style>
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Este párrafo tiene un tamaño de fuente válido de 16px.</p>
</body>
</html>