Descripteur de règle CSS font-style
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Le descripteur CSS font-style, associé à la règle @ @font-face, permet d'indiquer le style de police pour la police définie via la règle.
Pour une police donnée (un ensemble de fontes), les auteur·ice·s peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur font-style peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.
Syntaxe
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;
Valeurs
normal-
C'est la fonte « normale » de la police qui est choisie.
italic-
C'est la fonte italique de la police qui est choisie.
oblique-
C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.
obliqueavec un angle-
C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.
obliqueavec un intervalle d'angle-
Utilise une fonte comme
obliqueet indique un intervalle d'angles possibles pour la pente du texte. Notez que l'intervalle est uniquement pris en compte pour la valeuroblique, aucune autre valeur n'est autorisée aprèsnormalouitalic.
Définition formelle
| En lien avec les règles @ | @font-face |
|---|---|
| Valeur initiale | normal |
| Valeur calculée | comme défini |
Syntaxe formelle
font-style =
auto |
normal |
italic |
left |
right |
oblique [ <angle [-90deg,90deg]>{1,2} ]?
Exemples
Dans les exemples qui suivent, on utilise les différentes formes liées à la police Garamond :
@font-face {
font-family: "garamond";
src: url("garamond.woff2");
}
La version en italique du texte utilise les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.
En revanche, si on dispose d'une vraie version italique, on peut l'indiquer avec le descripteur src et indiquer que c'est une police italique avec font-style. Une « vraie » police italique utilise des glyphes différents et la qualité calligraphique obtenue est meilleure qu'avec les glyphes normaux penchés artificiellement.
@font-face {
font-family: "garamond";
src: url("garamond-italic.woff2");
font-style: italic;
}
Spécifications
| Spécification |
|---|
| CSS Fonts Module Level 4 # font-prop-desc |
Compatibilité des navigateurs
Voir aussi
- Le descripteur
font-display - Le descripteur
font-family - Le descripteur
font-stretch - Le descripteur
font-weight - Le descripteur
font-feature-settings - Le descripteur
font-variation-settings - Le descripteur
src - Le descripteur
unicode-range