font-weight

Resumo

A propeidade font-weight especifica o peso ou o traço da fonte:

  • Valor inicial: normal
  • Aplica-se a: todos os elementos
  • Herdado: sim
  • Mídia: Visual
  • Valor computado: Um dos valores numéricos (100, etc.), ou um dos valores numéricos mais um dos valores relativos (mais realçado ou menos realçado)

Sintaxe

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Valores

normal 
O peso normal da fonte. Semelhante ao 400.
bold 
O peso negrito da fonte. Semelhante ao 700.
lighter 
Um peso de fonte mais leve que o elemento pai (entre os pesos disponíveis da fonte).
bolder 
Um peso de fonte duas vezes grosso que o elemento pai (entre os pesos disponíveis da fonte).
100, 200, 300, 400, 500, 600, 700, 800, 900 
Os pesos numéricos de fontes para fontes que fornecem mais do que apenas normal e negrito. Se o peso exato fornecido não estiver disponível, então 600-900 utiliza o mais próximo e disponível peso mais duas vezes grosso (ou, se não houver, o peso mais leve disponível e mais próximo) e 100-500 utiliza o peso mais leve disponível e mais próximo (ou, se não houver, o peso mais escuro disponível e mais próximo). Significa que para fontes que fornecem apenas normal e negrito, 100-500 são normais e 600-900 são negritos.

Exemplos

HTML

<p>
Alice começava a ficar muito cansada de sentar-se junto à irmã no banco e
de não ter nada para fazer: uma ou duas vezes ela espiou o livro que a irmã
estava a ler, mas não tinha fotos nem conversas nele, «e qual é a utilização
de um livro», pensou Alice, «sem fotos ou conversas?»
</p>

<div>Sou quatro vezes grosso<br/>
  <span>Sou mais leve</span>
</div>

CSS

/* Definir o texto do parágrafo como negrito. */
p {
  font-weight: bold;
}

/* Defina o texto div para dois passos mais grossos do
que o normal, mas menos que um negrito padrão. */
div {
 font-weight: 600;
}

/* Define o texto dentro da tag span para
ser um passo mais leve que o pai. */
span {
  font-weight: lighter;
}

Resultado

Especificações

Compatibilidade com navegadores

Navegador Versão mais antiga
Internet Explorer 3
Netscape 4
Opera 3.5

Veja também