Fonte em Itálico, Oblíqua e Normal - A propriedade font-style (italic, normal e oblique) - Tutorial de CSS

Neste tutorial de CSS de nossa apostila, vamos iniciar nossos estudos de formatação de textos com CSS, aprendendo a estilizar as fontes com a propriedade font-style, que nos permite deixar as fontes em Itálico, Oblíqua ou Normal.

• Fazer download da Apostila de HTML + CSS

A propriedade font-style - Estilizando Fontes com CSS

Durante todo este tutorial, iremos aprender a usar a importante propriedade do CSS, a font-style, que como o próprio nome pode sugerir, serve para estilizar as fontes dos textos de seu site.

Embora já tenhamos estudado isso em HTML, com o CSS podemos estilizar uma, duas, dez, milhares ou milhões de páginas ao mesmo tempo, apenas alterando alguns códigos de nossa folha de estilos, o que não era possível apenas com o HTML (lá tínhamos que definir o estilo em cada trecho, de cada página).

Veremos que é possível definir qualquer trecho de um texto e dizer como ele vai aparecer, se em itálico (um tipo de texto que aparenta ser escrito a mão), oblíquo (letra romana inclinada) ou normal.

Essa propriedade "font-style" do CSS pode receber três diferentes valores:

1. normal
2. italic
3. oblique.

Fonte em Itálico no CSS: font-style: italic

A sintaxe para deixar um texto com o estilo Itálico, através da propriedade font-style em CSS, é:

font-style: italic ;

Por exemplo, o código:

<p style="font-style: italic"> Este código está em Itálico </p>

Surte o seguinte efeito:

Este código está em Itálico

As fontes em itálico geralmente são usadas em:

• Para realçar, destacar e enfatizar uma palavra ou frase
• Títulos, como de livros
• Nomes de música
• Constantes, como em Matemática ou Física, e outros símbolos
• Poemas, Frases e Citações fora do contexto de seu artigo
• Quando for usar palavras de língua estrangeira em seu artigo

Fonte oblíqua em CSS: font-style: oblique

A propriedade font-style nos permite ainda colocar uma fonte oblíqua, ou seja, inclinada.
É como se fosse a fonte romana (esta fonte normal), sendo que simplesmente deslocada obliquamente para a direita.

A sintaxe para usar fontes oblíquas é:

font-style: oblique;

Se você testar essa estilização em textos, vai notar que, dependendo da fonte, não vai haver nenhuma diferença entre uma fonte em itálico e uma oblíqua.
E realmente a diferença a pouca, e em alguns casos é simplesmente igual.

Mas as fontes em itálico tem uma escrita diferente, como se fosse escritas à mão, veja o exemplo da Wikipedia:

Agora veja o mesmo texto com o font-style: oblique, que são simplesmente inclinadas, mantendo a forma da fonte original:

Fonte Normal em CSS - font-style: normal

Por padrão, a propriedade font-style é:

font-style: normal ;

Ou seja, essa propriedade define que a fonte não está em itálico ou oblíqua, e sim normal.
Mas não é estranho existir uma propriedade para dizer que a fonte deve ser normal, sem nenhum efeito ou estilo CSS?

Você deve usar a propriedade font-style com o valor "normal" quando quiser ter certeza que aquele texto não fique em itálico.

Por exemplo, se estiver escrevendo um texto em itálico, e quiser escrever algo sem ser em itálico:

<p>O HTML é uma linguagem (<span style="font-style: normal;">de marcação!</span>) usada para criar sites.<br/>
   Já o CSS é uma linguagem (<span style="font-style: normal;">de estilo!</span>) usada para criar efeitos e estilizar um site de uma maneira bem mais simples e profissional.
</p>

Onde você tenha aplicado o seguinte regra de estilo em sua folha de CSS, para todos os parágrafos:

p {
   font-style: italic;
}

O resultado é:

O HTML é uma linguagem (de marcação!) usada para criar sites.
Já o CSS é uma linguagem (de estilo!) usada para criar efeitos e estilizar um site de uma maneira bem mais simples e profissional.

Também pode ser que você defina uma alguma tag ou divisão <div> onde tudo dentro deve ser itálico ou por herança, todas as tags internas terão a propriedade font-style com valor "italic" ou "oblique".
Então, para garantir que uma parte dela não vai ter esse estilo, use o font-style: normal

Exercício de CSS com a font-style

Crie uma folha de estilo CSS com as seguintes regras:
O primeiro parágrafo de cada site deve estar em itálico
O segundo parágrafo deve ser a fonte oblíqua
O terceiro parágrafo deve ser normal

Para resolver este exercício, vamos usar a propriedade font-style três vez, com os seus três possíveis valores "italic", "oblique" e "normal".
E para selecionar o primeiro, segundo e terceiro parágrafo, devemos usar alguma pseudo-classe ou pseudo-elemento, como first-child ou nth-child().

Nossa folha de estilos CSS fica assim:

p:nth-child(1) {
 font-style: italic;
}

p:nth-child(2) {
 font-style: oblique;
}

p:nth-child(3) {
 font-style: normal;
}