font-style - Propriété CSS
Résumé des caractéristiques de la propriété font-style
normal
| italic
| oblique
normal
font-style
passe d'une valeur à l'autre sans transition.Description.
La propriété font-style
définit l'inclinaison des caractères (en italique).
Si la police utilisée n'est pas disponible en italique ou en oblique, le navigateur
déterminera le glyphe des caractères inclinés par calcul, sauf si la propriété
font-synthesis
l'interdit.
font-style
peut aussi être un descripteur, utilisé avec la directive @font-face
.
Les différents usages de font-style
.
Le mot font-style
correspond à la propriété décrite sur cette page, mais peut aussi être un descripteur
utilisable avec les directives suivantes :
@font-face
: Définit tous les paramètres d'une police de caractères téléchargeable.
Syntaxes pour font-style
.
angle
est une valeur numérique suivie d'une unité d'angle.
- font-style: normal;
Valeur par défaut. Les caractères ne sont pas inclinés.
- font-style: italic;
Les caractères sont en italiques. Dans les polices qui comportent plusieurs styles, le navigateur choisit celui qui correspond à italique. Si le style n'est pas trouvé, le navigateur peut simuler l'italique. Voir à ce sujet la propriété
font-synthesis
.Les caractères italiques ont souvent un glyphe différent de celui des caractères droits. Ils sont en général plus cursifs. C'est flagrant sur l'exemple ci-dessous en particulier sur la lettre 'a' et la lettre 'p'.
aperçufont-style:normal;
aperçufont-style:italic;
- font-style: oblique;
Le terme
oblique
désigne plutôt les caractères inclinés dont le glyphe a été calculé, par opposition aux caractères italiques qui sont définis dans la police. Les caractères obliques ont donc la même forme que les caractères droits. Cependant, lorsque les navigateurs ne trouvent pas le style oblique dans la police, ils utilisent souvent le style italique à la place.La plupart du temps, les rendus de
oblique
et deitalic
sont donc identiques. Mais cela dépend aussi de la police de caractères utilisée : dispose-t-elle de variantes italique et oblique séparées ? Ce qui est très rare.aperçufont-style:normal;
aperçufont-style:oblique;
- font-style: oblique 10deg;
oblique
peut être suivi d'une valeur numérique, positive ou négative, suivie d'une unité angulaire (voir les unités CSS d'angle). La valeur doit être comprise entre -90 degrés et +90 degrés, mais se situe plutôt dans les quelques degrés autour de zéro. Les caractères sont penchés suivant l'angle indiqué.
Si l'angle est négatif : les caractères seront alors penchés vers l'arrière.
Si aucun angle n'est indiqué, la valeur par défaut est de 14 degrés, ce qui correspond à l'inclinaison des caractères avec la valeuritalic
.aperçufont-style:normal;
aperçufont-style:oblique;
- font-style:
initial
; font-style:inherit
; font-style:revert
; font-style:revert-layer
; font-style:unset
;La valeur initiale est :
.normal
Exemple d'animation de font-style
.
L'animation de font-style
passe brutalement d'une valeur à une autre.
En utilisant la syntaxe permettant d'indiquer l'angle d'inclinaison des caractères on devrait pouvoir
obtenir une animation plus fluide. Mais cette syntaxe n'étant pratiquement jamais reconnue, il n'est pas possible
de le vérifier.
Simulateur.
Le simulateur vous permet de choisir la police :
Baskerville Regular
ne comporte que les glyphes des caractères droits. Les rendus en italique et en oblique sont donc calculés par le navigateur.Baskerville Italic
comporte les glyphes droits et leur variante en italique. Les formes des lettres sont non seulement inclinées mais différentes de celles des caractères droits. Cela se voit très nettement sur lea
, lew
, lef
, etc.
Dans la mesure ou la variante italique est disponible dans la police, il est probable que votre navigateur l'utilisera également pour l'oblique.
Compatibilité et prise en charge.
Aucun problème de compatibilité n'est à signaler avec la propriété font-style
.
Cependant, la qualité du résultat dépend énormément de la police choisie, suivant que les glyphes italiques sont définis dans la police,
ou bien calculés par le navigateur.
font-style
.
font-style
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que font-style
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-style
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.