CSS : font-style - Web Formation

Description

La propriété font-style permet de contrôler le style général de la police : normal, italique ou oblique. Elle est principalement utilisée pour activer ou désactiver l’italique dans un texte.

Elle ne modifie ni la famille de police, ni la graisse, mais uniquement l’inclinaison ou le style typographique.

Valeurs possible

Voici les valeurs les plus courantes pour font-style :

Valeur	Exemple	Description
`normal`	`font-style: normal;`	Aucun italique ou inclinaison (valeur par défaut).
`italic`	`font-style: italic;`	Affiche la version italique de la police, si elle existe. C’est l’option typographique la plus propre.
`oblique`	`font-style: oblique;`	Simule une inclinaison lorsque la police n’a pas de vraie version italique. Souvent moins élégant.
`oblique <angle>`	`font-style: oblique 10deg;`	Inclinaison personnalisée (support limité, surtout sur les polices variables).

italic utilise une version dessinée de la police, plus lisible et élégante. oblique incline artificiellement la police : à éviter si la police possède de vrais italiques.

Exemple

Démonstration interactive : font-style

Choisissez une valeur

Aperçu

orem ipsum dolor sit amet, consectetur adipiscing elit.

Code HTML & CSS

<div class="demo">orem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="demo">orem ipsum dolor sit amet, consectetur adipiscing elit.</div>

.demo {
    font-style: normal;
}

.demo {    font-style: normal;}

.demo {
    font-style: italic;
}

.demo {    font-style: italic;}

.demo {
    font-style: oblique;
}

.demo {    font-style: oblique;}

Remarques

Pour un rendu professionnel, il vaut mieux utiliser une police qui possède un vrai italique.
Dans les polices variables, l’italique peut être contrôlé via font-variation-settings avec l’axe "ital" ou "slnt".
Ne pas confondre italique et mise en emphase HTML :
- <em> = emphase sémantique (recommandé)
- font-style: italic; = style visuel