A propriedade CSS Font-style e font-weight 
O estilo de uma fonte é afetado através de duas diferentes propriedades: font-weight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinação. Sintaxe:
font-style: normal (ou italic, oblique)
Exemplos:
h1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
Sintaxe:
font-weight: normal | bold (normal=400 e bold = 700)
font-weight: bolder | lighter (valores relativos)
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemplos:
h1 { font-weight: normal }
b { font-weight: 900 }
<b> ... <b style="font-weight: bolder">...</b> ... </b>
A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic é uma fonte distinta da normal, e não, meramente uma versão inclinada da mesma. Os browsers, porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto, simulando um itálico.
Os valores numéricos para font-weight oferecem um controle excepcional sobre o peso da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (para um mesmo nome de fonte). Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5 níveis diferentes de mais pesado ou mais leve. 700 é o "bold" típico e 400 é o "normal".
O exemplo a seguir ilustra o efeito com a fonte "Tahoma" (Windows):
<html>
<head>
<style type=text/css>
P {font-family: tahoma;
font-size: 18pt;}
.b100 {font-weight: 100}
.b200 {font-weight: 200}
.b300 {font-weight: 300}
.b400 {font-weight: 400}
.b500 {font-weight: 500}
.b600 {font-weight: 600}
.b700 {font-weight: 700}
.b800 {font-weight: 800}
.b900 {font-weight: 900}
.nor {font-weight: normal}
.bol {font-weight: bold}
</style>
</head>
<body>
<p><span>100</span>
<span>200</span>
<span>300</span>
<span>400</span>
<span>500</span>
<span>normal</span><br>
<span>600</span><br>
<span>700</span>
<span>800</span>
<span>bold</span><br>
<span>900</span></p>
</body>
</html>
font-style: normal (ou italic, oblique)
Exemplos:
h1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
Sintaxe:
font-weight: normal | bold (normal=400 e bold = 700)
font-weight: bolder | lighter (valores relativos)
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemplos:
h1 { font-weight: normal }
b { font-weight: 900 }
<b> ... <b style="font-weight: bolder">...</b> ... </b>
A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic é uma fonte distinta da normal, e não, meramente uma versão inclinada da mesma. Os browsers, porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto, simulando um itálico.
Os valores numéricos para font-weight oferecem um controle excepcional sobre o peso da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (para um mesmo nome de fonte). Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5 níveis diferentes de mais pesado ou mais leve. 700 é o "bold" típico e 400 é o "normal".
O exemplo a seguir ilustra o efeito com a fonte "Tahoma" (Windows):
<html>
<head>
<style type=text/css>
P {font-family: tahoma;
font-size: 18pt;}
.b100 {font-weight: 100}
.b200 {font-weight: 200}
.b300 {font-weight: 300}
.b400 {font-weight: 400}
.b500 {font-weight: 500}
.b600 {font-weight: 600}
.b700 {font-weight: 700}
.b800 {font-weight: 800}
.b900 {font-weight: 900}
.nor {font-weight: normal}
.bol {font-weight: bold}
</style>
</head>
<body>
<p><span>100</span>
<span>200</span>
<span>300</span>
<span>400</span>
<span>500</span>
<span>normal</span><br>
<span>600</span><br>
<span>700</span>
<span>800</span>
<span>bold</span><br>
<span>900</span></p>
</body>
</html>
Os valores lighter e bolder especificam pesos de fontes relativos a algum valor herdado. Eles avançam ou retrocedem na escala de 100 a 900 relativos aos pesos de fontes.
| < Anterior | Próximo > |
|---|
