A font-weightpropriedade define a espessura, ou espessura, de uma fonte e depende das faces de fonte disponíveis em uma família de fontes ou das espessuras definidas pelo navegador.
span ( font-weight: bold; )A font-weightpropriedade aceita um valor de palavra-chave ou um valor numérico predefinido. As palavras-chave disponíveis são:
normalboldbolderlighter
Os valores numéricos disponíveis são:
100200300400500600700800900
O valor da palavra-chave normalmapeia para o valor numérico 400e o valor boldmapeia para 700.
Para ver qualquer efeito usando valores diferentes de 400ou 700, a fonte usada deve ter faces embutidas que correspondam aos pesos especificados.
Se uma fonte tiver uma versão em negrito (“700”) ou normal (“400”) como parte da família da fonte, o navegador a usará. Se eles não estiverem disponíveis, o navegador irá imitar sua própria versão em negrito ou normal da fonte. Ele não irá imitar os outros pesos indisponíveis. As fontes costumam usar nomes como “Regular” e “Light” para identificar qualquer espessura de fonte alternativa.
A seguinte demonstração demonstra o uso dos valores de peso alternativos:
A demonstração acima está usando a fonte gratuita Open Sans, incorporada usando a API do Google Web Fonts. A fonte é carregada com todas as espessuras de fonte disponíveis e assim, usando a font-weightpropriedade, as diferentes espessuras disponíveis são exibidas conforme descrito no texto de cada parágrafo. Os pesos indisponíveis simplesmente exibem o peso logicamente mais próximo.
Fontes comuns como Arial, Helvetica, Georgia, etc. não têm pesos diferentes de 400e 700. Portanto, a mesma demonstração exibida com uma dessas fontes exibiria apenas dois pesos nos nove parágrafos.
Usando palavras-chave “mais ousadas” e “mais leves”
Os valores de palavra-chave boldere lightersão relativos ao peso da fonte calculado do elemento pai. O navegador irá procurar pelo peso “mais forte” ou “mais leve” mais próximo, dependendo do que estiver disponível na família de fontes, caso contrário, ele simplesmente escolherá “400” ou “700”, dependendo do que fizer mais sentido.
Os elementos filho não herdarão os valores de palavra-chave “bolder” e “lighter”, mas, em vez disso, herdarão o peso calculado.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Funciona | Funciona |