Propriedade font-weight
Última atualização: 2026-09-13
font-weight Propriedade font-weight
A propriedade font-weight do CSS define a espessura do texto. Ela aceita palavras-chave nomeadas e também valores numéricos de 1 a 1000, e o texto em negrito é comumente usado para títulos e ênfase.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | font-weight |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
font-weight: normal | bold | bolder | lighter | <number [1,1000]>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | bold | bolder | lighter | Palavra-chave | Palavras-chave de peso predefinidas |
<number [1,1000]> | Tipo | Um valor numérico de peso, por exemplo 400 ou 700 |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-weight | ✓ v2 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： 400 equivale a normal e 700 a bold; estes são os dois valores mais comuns.
Aviso： Nem toda fonte contém todos os pesos. Os pesos ausentes são correspondidos ao mais próximo disponível pelo navegador, então o resultado renderizado pode variar.
❓ Perguntas Frequentes
QO que significam as palavras-chave bolder e lighter em font-weight?
ASão palavras-chave relativas: bolder torna o peso um passo mais pesado que o elemento pai e lighter um passo mais leve. Por exemplo, se o pai for 400, bolder resolve para 700; se o pai já for o peso mais pesado, permanece inalterado. São úteis para ajustes relativos herdados, mas valores numéricos dão controle mais preciso.
QComo uso valores numéricos com a propriedade font-weight no CSS?
AA propriedade aceita números de 1 a 1000. Fontes comuns geralmente fornecem apenas pesos de cem em cem (100, 200, ..., 900), onde 400 corresponde a normal e 700 a bold. Fontes variáveis podem assumir qualquer valor intermediário, o que também permite animar transições de peso com CSS.
QPor que font-weight: bold não tem efeito visível no meu conteúdo de texto?
AAs causas comuns: a fonte escolhida não tem variantes em negrito, então o navegador substitui pelo peso mais próximo ou sintetiza um visual em negrito; ou uma regra posterior substitui a declaração. Fontes de sistema em chinês geralmente têm apenas regular e bold, então valores como 800 ou 900 caem no bold e parecem idênticos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
