font-weight
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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 peso500
. Se500
não estiver disponível, usa-se a heurística para peso menor do que 500. - Se solicitado o peso
500
, usa-se o peso400
. Se400
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:
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> |
bolder |
lighter
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
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
Specification |
---|
CSS Fonts Module Level 4 # font-weight-prop |
Compatibilidade com navegadores
BCD tables only load in the browser