A font-style propriedade é usada principalmente para especificar texto em itálico.
Esta propriedade possui três valores:
normal – o texto é mostrado normalmente
itálico – o texto é mostrado em itálico
oblíquo – o texto está “inclinado” (oblíquo é muito semelhante ao itálico, mas menos suportado)
Exemplo
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Espessura da fonte
A font-weight propriedade especifica o peso de uma fonte:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Variante de fonte
A font-variantpropriedade especifica se um texto deve ou não ser exibido em uma fonte com letras maiúsculas.
Em uma fonte com letras maiúsculas, todas as letras minúsculas são convertidas em letras maiúsculas. No entanto, as letras maiúsculas convertidas aparecem em um tamanho de fonte menor que as letras maiúsculas originais no texto.
Exemplo
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
<< Anterior Fontes CSS
Deixe um comentário