Estilo de fonte CSS

Índice

Estilo de fonte

A propriedade font-style é usada principalmente para especificar texto em itálico.

Esta propriedade tem 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;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<h1>The font-style property</h1>

<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 propriedade font-weight especifica o peso de uma fonte:

Exemplo

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Experimente você mesmo →

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

<h1>The font-weight property</h1>

<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 propriedade font-variant especifica se um texto deve ou não ser exibido em fonte small-caps.

Em uma fonte small-caps, todas as letras minúsculas são convertidas em maiúsculas cartas. No entanto, as letras maiúsculas convertidas aparecem em um tamanho de fonte menor do que as letras maiúsculas originais do texto.

Exemplo

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<h1>The font-variant property</h1>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>