font-weight
===========

Resumo
------

A propriedade CSS `font-weight` especifica o peso ou a intensidade da fonte (ex.: negrito). Algumas fontes oferecem apenas as opções `normal` e negrito.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a font weight |

Sintaxe
-------


```css
font-weight: normal;
font-weight: bold;

/\* Relativo ao elemento pai \*/
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/\* Valores globais \*/
font-weight: inherit;
font-weight: initial;
font-weight: unset;
```

### Valores

`normal`

Peso normal. O mesmo que `400`.

`bold`

Peso negrito. O mesmo que `700`.

`lighter`

Um peso de fonte mais claro que o elemento pai (dentre os pesos disponíveis da fonte).

`bolder`

Um peso de fonte mais escuro que o elemento pai (dentre os pesos disponíveis da fonte).

`100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`

Pesos numéricos para fontes que oferecem mais que normal e negrito.

### Contingência

Caso o dado peso solicitado não esteja disponível, a seguinte heurística é usada para determinar o peso efetivo a ser usado:

* Se solicitado um peso maior que `500`, usa-se o próximo peso mais escuro (ou, se não houver, usa-se o próximo mais claro).
* Se solicitado um peso menor que `400`, usa-se o próximo peso mais claro (ou, se não houver, usa-se o próximo mais escuro).
* Se solicitado o peso `400`, usa-se o peso `500`. Se `500` não estiver disponível, usa-se a heurística para peso menor do que 500.
* Se solicitado o peso `500`, usa-se o peso `400`. Se `400` não estiver disponível, usa-se a heurística para peso menor do que 400.

Isto significa que para fontes que oferecem apenas `normal` e negrito, `100`-`500` significa normal, e `600`-`900` significa negrito.

### Significado de pesos relativos

Quando for solicitado `lighter` ou `bolder`, a seguinte tabela é usada para calcular o peso absoluto do elemento:

| Valor herdado | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### Mapeamento de nomes comuns de pesos

Os valores de 100 a 900 correspondem grosseiramente aos seguintes nomes comuns de pesos:

`100`

Thin (Hairline)

`200`

Extra Light (Ultra Light, Ultra Fino)

`300`

Light (Fino)

`400`

Normal

`500`

Medium (Médio)

`600`

Semi Bold (Demi Bold, Semi Negrito)

`700`

Bold (Negrito)

`800`

Extra Bold (Ultra Bold, Super Negrito)

`900`

Black (Heavy)

### Interpolação

Um valor de `font-weight` é interpolado com passos discretos (múltiplos de 100). A interpolação acontece no espaço de números reais e depois é feita uma conversão para números inteiros por arredondamento para o múltiplo de 100 mais próximo. Valores exatamente entre dois múltiplos de 100 são arredondados para mais.

### Sintaxe formal
```

font-weight =   
  <font-weight-absolute>  | (en-US)  
  bolder                  | (en-US)  
  lighter                   
  
<font-weight-absolute> =   
  normal             | (en-US)  
  bold               | (en-US)  
  <number [1,1000]>    
  
```

Exemplos
--------

### HTML


```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


```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
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-weight-prop |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.