Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

font-weight

Esta tradução não está completa. Por favor ajude a traduzir este artigo a partir do Inglês.

Resumo

The font-weight property specifies the weight or boldness of the font.

  • 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 
Normal font weight. Same as 400.
bold 
Bold font weight. Same as 700.
lighter 
One font weight lighter than the parent element (among the available weights of the font).
bolder 
One font weight darker than the parent element (among the available weights of the font).
100, 200, 300, 400, 500, 600, 700, 800, 900 
Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal and 600-900 are bold.

Exemplos

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps darker than
   normal but less than a standard bold. */
div {
 font-weight: 600;
}

/* Sets text enclosed within span tag 
   to be one step lighter than the parent. */
span {
  font-weight: lighter;
}

Result

Especificações

Compatibilidade com navegadores

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

Veja também

font font-family, font-size, font-size-adjust, font-style, font-variant, font-weight, line-height

Categorias

Interwiki Language Links

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores para esta página: SphinxKnight, teoli, Verruckt
 Última atualização por: SphinxKnight,