Skip to main content
Validação HTML

CSS: “font-weight”: “X” não é um valor de “font-weight”.

Sobre este problema de CSS

A propriedade font-weight controla a espessura ou o peso dos caracteres de texto. Ao contrário de muitas outras propriedades CSS, ela não aceita unidades de comprimento como px, em ou %. Em vez disso, usa um conjunto específico de palavras-chave ou valores numéricos sem unidades para indicar o peso desejado. Fornecer um valor não reconhecido faz com que a declaração seja ignorada pelo navegador, o que significa que o estilo pretendido não será aplicado, e o texto voltará ao peso herdado ou padrão.

Os valores aceitos para font-weight são:

  • Palavras-chave: normal (equivalente a 400), bold (equivalente a 700), bolder (relativo, um nível mais pesado que o elemento pai), lighter (relativo, um nível mais leve que o elemento pai).
  • Valores numéricos: Qualquer número de 1 a 1000. Historicamente, apenas múltiplos de 100 (100 a 900) eram válidos, mas a especificação CSS Fonts Level 4 expandiu isso para qualquer valor no intervalo de 11000. Note que muitos validadores e navegadores mais antigos podem ainda reconhecer apenas os múltiplos de 100900.

Isso importa para a conformidade com os padrões e renderização previsível. Um valor inválido de font-weight é silenciosamente descartado pelos navegadores, o que pode levar a resultados visuais confusos — especialmente quando você espera um peso específico de uma fonte variável ou família de fontes com múltiplos pesos.

Para corrigir este problema, identifique o valor inválido no seu CSS e substitua-o por um dos valores aceitos listados acima. Se estava a usar um valor em pixels ou outra unidade, simplesmente remova a unidade e escolha um peso numérico apropriado. Se usou uma palavra-chave com erro ortográfico (ex.: bolded ou heavy), substitua-a pela palavra-chave correta.

Exemplos

Incorreto: usar uma unidade de comprimento

p {
  font-weight: 20px;
}

O validador reporta isto porque 20px não é um valor válido para font-weight. A propriedade não aceita unidades de comprimento.

Incorreto: usar uma palavra-chave inválida

h2 {
  font-weight: heavy;
}

A palavra-chave heavy não é reconhecida pela especificação CSS para font-weight.

Correto: usar valores numéricos válidos

p {
  font-weight: 300;
}

h2 {
  font-weight: 700;
}

Correto: usar palavras-chave válidas

p {
  font-weight: lighter;
}

h2 {
  font-weight: bold;
}

Exemplo completo de HTML

<!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">Este texto usa um peso de fonte leve (300).</p>
  <p class="regular">Este texto usa um peso de fonte normal (400).</p>
  <p class="semi-bold">Este texto usa um peso de fonte semi-negrito (600).</p>
  <p class="bold">Este texto usa um peso de fonte negrito (700).</p>
</body>
</html>

Referência rápida de pesos numéricos comuns

Valor Nome típico
100 Thin
200 Extra Light
300 Light
400 Normal / Regular
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Black

Tenha em mente que o efeito visual real de um peso numérico depende de a família de fontes carregada fornecer um peso correspondente. Se uma fonte incluir apenas pesos 400 e 700, o navegador mapeará outros valores para o peso disponível mais próximo.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.