font-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété font-style
permet de sélectionner une fonte italique (italic
) ou oblique (oblique
) parmi celles listées par font-family
.
Exemple interactif
La forme italique est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme oblique quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absentes (le moteur penche alors les glyphes de la forme normale) — pour plus d'informations sur l'activation de cette synthèse, voir la propriété font-synthesis
.
Syntaxe
La propriété font-style
peut être définie avec l'un des mots-clés suivants.
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
/* Valeurs globales */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: unset;
La propriété font-style
s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est oblique
, il peut également être suivi de l'angle.
Valeurs
normal
-
Sélectionne une police qualifiée de
normal
parmi celles defont-family
. italic
-
Sélectionne une police qualifiée d'
italic
. S'il n'y a pas de version italique, une versionoblique
sera sélectionnée à la place. Si aucune version n'est disponible, le style de police est synthétisé. oblique
-
Sélectionne une police qualifiée d'
oblique
. S'il n'y a pas de version oblique, une versionitalic
sera sélectionnée à la place. Si aucune version n'est disponible, le style de police est synthétisé. oblique
<angle>
-
Sélectionne une police qualifiée d'
oblique
et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponibles pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur synthétisera une police penchée en tournant les caractères d'une fonte normale. L'angle indiqué (cf.<angle>
) doit être compris entre-90deg
et90deg
. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera14deg
. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.En général, si on utilise un angle de 14 degrés ou plus, des angles plus grands sont préférables ; sinon, des angles plus petits sont préférables (voir la section Font Matching Algorithm dans la spécification pour l'algorithme exact).
Polices variables
Les polices variables permettent d'obtenir un contrôle fin sur la pente appliquée à la fonte. Pour cela, on pourra utiliser une police variable et font-style
avec le mot-clé oblique
suivi d'une valeur d'angle.
Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "slnt"
qui est utilisé afin d'implémenter les variations de pente. C'est l'axe "ital"
qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir font-variation-settings
.
Note : Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe CSS Fonts Level 4 qui permet d'utiliser font-style: oblique
suivi d'un angle. Le code de démarrage utilise font-style: oblique 23deg;
— modifiez la valeur <angle>
pour changer la pente du texte.
Définition formelle
Valeur initiale | normal |
---|---|
Applicabilité | all elements and text. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Valeur calculée | comme spécifié |
Type d'animation | by computed value type; normal animates as oblique 0deg |
Syntaxe formelle
font-style =
normal |
italic |
oblique <angle [-90deg,90deg]>?
Exemples
HTML
<p class="normal">Un paragraphe normal.</p>
<p class="italic">Un paragraphe italique.</p>
<p class="oblique">Un paragraphe oblique.</p>
CSS
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
Résultat
Accessibilité
L'utilisation de grandes portions de textes avec font-style: italic
peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.
Spécifications
Specification |
---|
CSS Fonts Module Level 4 # font-style-prop |
Compatibilité des navigateurs
BCD tables only load in the browser