Propriedade CSS font-style
A propriedade CSS font-style define o estilo da fonte de um texto. Há três opções: normal, italic e oblique.
A propriedade CSS font-style controla se o texto é exibido na vertical ou inclinado. Seus três valores de palavra-chave são normal, italic e oblique. É a forma padrão de mudar um trecho de texto para um estilo inclinado sem alterar a família ou o peso da fonte.
Esta página aborda o que cada valor faz, a diferença prática entre italic e oblique, o ângulo opcional que pode ser passado para oblique e um problema comum quando uma fonte não possui uma face itálica real.
Por que a inclinação importa
O texto inclinado é uma indicação visual que os leitores reconhecem instantaneamente: sinaliza ênfase, títulos de obras, frases estrangeiras ou termos técnicos. Usar font-style (em vez de, por exemplo, inclinar manualmente o texto) mantém esse significado codificado no CSS, de modo que permanece correto em diferentes fontes, níveis de zoom e tecnologias assistivas.
Existem duas maneiras distintas pelas quais designers tipográficos inclinam uma letra:
- Italic é um design cursivo separado — as formas das letras são redesenhadas, não apenas inclinadas. Um
aitálico verdadeiro muitas vezes parece bem diferente de sua contraparte na vertical. - Oblique é o design na vertical inclinado mecanicamente por alguns graus. As formas permanecem as mesmas; elas simplesmente se inclinam.
Quando você escreve font-style: italic, o navegador primeiro procura uma face itálica real na família de fontes. Se a família não incluir uma, o navegador sintetiza uma inclinação — o que é essencialmente o que oblique produziria. É por isso que, com muitas fontes web, italic e oblique parecem idênticos.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.fontStyle = "oblique"; |
Sintaxe
font-style: normal | italic | oblique | initial | inherit;A palavra-chave oblique também aceita um ângulo opcional de -90deg a 90deg, que permite controlar exatamente o quanto o texto se inclina:
font-style: oblique 14deg;Se você omitir o ângulo, os navegadores usam uma inclinação padrão de aproximadamente 14deg.
Exemplo do valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>A diferença entre italic e oblique
Conforme descrito acima, italic solicita o design cursivo específico de uma fonte, enquanto oblique solicita uma versão inclinada do design na vertical. Quando uma fonte inclui ambas as faces, as duas podem parecer notavelmente diferentes; quando inclui apenas uma, o navegador sintetiza a outra, de modo que parecem iguais. O exemplo abaixo renderiza as duas lado a lado:
Exemplo com os valores italic e oblique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Exemplo com todos os valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| normal | Significa que os caracteres de texto serão normais. Este é o valor padrão desta propriedade. | Experimente » |
| italic | O texto será exibido em itálico. | Experimente » |
| oblique | O texto será exibido de forma oblíqua. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Problema comum: fontes sem uma face itálica
Nem toda família de fontes inclui um itálico verdadeiro. Quando você aplica font-style: italic a tal fonte, o navegador simula a inclinação distorcendo os glifos na vertical. O resultado geralmente é aceitável, mas parece ligeiramente menos refinado do que um itálico desenhado. Se os itálicos são importantes para sua tipografia, certifique-se de que a fonte que você carrega realmente inclui um arquivo itálico (para fontes variáveis, que o eixo itálico esteja presente) e importe essa variante junto com a regular.
Para remover uma inclinação herdada de um elemento pai — por exemplo, para manter uma palavra na vertical dentro de um elemento <em> ou <i> — defina o valor de volta para normal:
em.upright {
font-style: normal;
}Propriedades relacionadas
font-style é uma parte de uma declaração de fonte. Estes capítulos cobrem o restante:
- CSS font-weight — controla o negrito, o outro indicador comum de ênfase.
- CSS font-family — escolhe o tipo de letra, que determina se existe um itálico real.
- CSS font-size — define o tamanho do texto.
- CSS font — a abreviação que define
font-style,font-weight,font-sizee mais de uma vez. - CSS text-decoration — outra forma de marcar o texto, com sublinhados e linhas.