Propriété CSS font-style
La propriété CSS font-style définit le style d'une police pour un texte : normal, italic ou oblique.
La propriété CSS font-style contrôle si le texte s'affiche droit ou incliné. Ses trois valeurs de mot-clé sont normal, italic et oblique. C'est la façon standard de faire passer un passage de texte en style incliné sans modifier la famille de polices ni la graisse.
Cette page explique ce que fait chaque valeur, la différence pratique entre italic et oblique, l'angle optionnel que vous pouvez passer à oblique, ainsi qu'un piège courant lorsqu'une police ne possède pas de véritable face italique.
Pourquoi l'inclinaison est importante
Le texte incliné est un repère visuel que les lecteurs reconnaissent instantanément : il signale l'emphase, les titres d'œuvres, les phrases étrangères ou les termes techniques. Utiliser font-style (plutôt que, par exemple, incliner le texte manuellement) maintient ce sens encodé en CSS, de sorte qu'il reste correct quelle que soit la police, le niveau de zoom ou la technologie d'assistance.
Les concepteurs typographiques disposent de deux manières distinctes d'incliner une lettre :
- Italic est une conception séparée, cursive — les formes des lettres sont redessinées, pas simplement inclinées. Un vrai
aitalique a souvent une apparence très différente de son équivalent droit. - Oblique correspond à la conception droite mécaniquement inclinée de quelques degrés. Les formes restent les mêmes ; elles penchent simplement.
Lorsque vous écrivez font-style: italic, le navigateur cherche d'abord une vraie face italique dans la famille de polices. Si la famille n'en fournit pas, le navigateur synthétise une inclinaison — ce qui revient essentiellement à ce que produirait oblique. C'est pourquoi, avec de nombreuses polices web, italic et oblique semblent identiques.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.fontStyle = "oblique"; |
Syntaxe
font-style: normal | italic | oblique | initial | inherit;Le mot-clé oblique accepte également un angle optionnel allant de -90deg à 90deg, ce qui vous permet de contrôler exactement l'inclinaison du texte :
font-style: oblique 14deg;Si vous omettez l'angle, les navigateurs utilisent une inclinaison par défaut d'environ 14deg.
Exemple avec la valeur 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>La différence entre italic et oblique
Comme décrit ci-dessus, italic demande la conception cursive spécifique d'une police, tandis qu'oblique demande une version inclinée de la conception droite. Lorsqu'une police fournit les deux faces, les deux peuvent sembler nettement différentes ; lorsqu'elle n'en fournit qu'une, le navigateur simule l'autre, et elles semblent identiques. L'exemple ci-dessous affiche les deux côte à côte :
Exemple avec les valeurs italic et 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>Exemple avec toutes les valeurs
<!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>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| normal | Indique que les caractères du texte seront normaux. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| italic | Le texte sera affiché en italique. | Essayer » |
| oblique | Le texte sera affiché en oblique. | Essayer » |
| initial | Applique à la propriété sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de l'élément parent. |
Piège courant : polices sans face italique
Toutes les familles de polices ne comprennent pas un vrai italique. Lorsque vous appliquez font-style: italic à une telle police, le navigateur simule l'inclinaison en penchant les glyphes droits. Le résultat est généralement acceptable, mais paraît légèrement moins soigné qu'un italique conçu. Si les italiques sont importants pour votre typographie, assurez-vous que la police que vous chargez fournit bien un fichier italique (pour les polices variables, que l'axe italique est présent) et importez cette variante en plus de la version normale.
Pour supprimer une inclinaison héritée d'un parent — par exemple, pour garder un mot droit à l'intérieur d'un élément <em> ou <i> — remettez la valeur à normal :
em.upright {
font-style: normal;
}Propriétés associées
font-style fait partie d'une déclaration de police. Ces chapitres couvrent le reste :
- CSS font-weight — contrôle la graisse, l'autre signal d'emphase courant.
- CSS font-family — choisit la police, ce qui détermine si un vrai italique existe.
- CSS font-size — définit la taille du texte.
- CSS font — le raccourci qui définit
font-style,font-weight,font-sizeet plus encore en une seule fois. - CSS text-decoration — une autre façon de marquer le texte, avec des soulignements et des lignes.