Verificação HTML: CSS: "font-size": "px" não é um valor válido de "font-size".

Sobre este problema de CSS

A propriedade font-size define o tamanho do texto e espera um valor CSS válido — seja uma palavra-chave (como small, medium, large), um valor numérico com uma unidade (como 16px, 1.2em, 100%), ou 0 (que não precisa de unidade). Quando o validador reporta que "px" não é um valor font-size válido, significa que a propriedade recebeu apenas a string px, sem o número obrigatório que a precede.

Este problema surge comumente em alguns cenários:

Erros de digitação ou eliminação acidental: O número foi removido durante a edição, deixando apenas a unidade.
Saída de template ou CMS: Um valor dinâmico (ex., de uma variável ou campo de base de dados) resolveu para vazio, produzindo algo como font-size: px;.
Erros de preprocessador: Uma variável Sass, Less, ou outro preprocessador CSS estava indefinida ou vazia, resultando numa unidade isolada no CSS compilado.

Embora a maioria dos browsers simplesmente ignore a declaração inválida e recorra a um tamanho de fonte herdado ou padrão, isto cria renderização imprevisível. O texto pode aparecer num tamanho inesperado, e o comportamento pode diferir entre browsers. CSS inválido também causa falhas na validação W3C, o que pode sinalizar problemas mais profundos no seu código ou pipeline de construção.

Como corrigir

Verifique se há um número em falta: Olhe para a declaração font-size assinalada pelo validador e adicione o valor numérico pretendido antes da unidade.
Inspecione valores dinâmicos: Se o valor vem de uma variável, motor de templates, ou campo CMS, certifique-se de que produz um valor completo (ex., 16 ou 16px) em vez de uma string vazia.
Use um valor de fallback: Ao gerar CSS dinamicamente, considere fornecer um valor de fallback caso a variável esteja vazia.

Exemplos

❌ Incorreto: Unidade isolada sem número

<p style="font-size: px;">Este texto tem um tamanho de fonte inválido.</p>

O validador reportará que "px" não é um valor font-size válido porque nenhum número precede a unidade.

✅ Correto: Valor numérico com unidade

<p style="font-size: 16px;">Este texto tem um tamanho de fonte válido.</p>

❌ Incorreto: Valor vazio de uma variável de template

Este é um padrão comum em sistemas de templates que pode produzir CSS inválido:

<p style="font-size: px;">Conteúdo dinâmico aqui.</p>

Quando a variável de template resolve para uma string vazia, apenas px permanece.

✅ Correto: Usar um valor de palavra-chave

Se não precisar de um tamanho específico em pixels, as palavras-chave CSS são outra opção válida:

<p style="font-size: medium;">Isto usa um tamanho de fonte por palavra-chave.</p>

✅ Correto: Usar outras unidades válidas

A propriedade font-size aceita muitos tipos de unidades. Todas estas são 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>

✅ Correto: Exemplo de documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Font Size Example</title>
  <style>
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Este parágrafo tem um tamanho de fonte válido de 16px.</p>
</body>
</html>