font-style
Active l’italique ou l’inclinaison du texte.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- uniquement l’angle d’inclinaison oblique
- S’applique à
- tous les éléments
- JavaScript
element.style.fontStyle = "italic"
Exemple
#blockquote {
font-style: italic;
}
blockquote cite {
font-style: normal;
}<blockquote style="font-style: italic; margin: 0">
« La meilleure façon d’apprendre à coder, c’est de coder. »
<cite style="font-style: normal; display: block; margin-top: 6px; color: #a3a3a3;">Mentor CodeWorlds</cite>
</blockquote>Définition et utilisation
#La propriété font-style choisit un style droit, italique ou oblique. italic utilise une véritable italique, c’est-à-dire des caractères conçus séparément. oblique est une version inclinée des caractères normaux, avec éventuellement un angle précis.
Si la police n’a pas de version italique, le navigateur incline automatiquement les caractères normaux. Le résultat est souvent moins élégant qu’une véritable italique.
Les balises <em> et <i> ont par défaut font-style: italic. La valeur normal est utile quand vous voulez désactiver cette italique.
Syntaxe
#font-style: normal | italic | oblique <angle>?;Valeurs
#- Un style normal et droit, sans inclinaison.
- Une véritable italique conçue dans la police.
- Une inclinaison des caractères normaux.
- Une inclinaison selon l’angle indiqué, si la police le permet.
Valeurs en pratique
#normal
.demo { font-style: normal; }italic
.demo { font-style: italic; }oblique
.demo { font-style: oblique; }oblique 20deg
.demo { font-style: oblique 20deg; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- L’italique est plus difficile à lire. Réservez-la à de courtes mises en valeur, pas à des paragraphes entiers.
- Si vous chargez une police personnalisée, chargez aussi sa version italique, plutôt que de compter sur une inclinaison artificielle.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.