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 a400),bold(equivalente a700),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
1a1000. Historicamente, apenas múltiplos de 100 (100a900) eram válidos, mas a especificação CSS Fonts Level 4 expandiu isso para qualquer valor no intervalo de1–1000. Note que muitos validadores e navegadores mais antigos podem ainda reconhecer apenas os múltiplos de100–900.
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.
Saiba mais: