Font-style - Propriété CSS

Schéma de la syntaxe de font-style.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• angle est une valeur numérique suivie d'une des unités d'angle.

Description de la propriété font-style.

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.

Valeurs pour font-style.

• 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çu

  font-style:normal;

  aperçu

  font-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 de italic 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çu

  font-style:normal;

  aperçu

  font-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 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 valeur italic.

  aperçu

  font-style:normal;

  aperçu

  font-style:oblique;
• font-style: initial; (normal) font-style: inherit; font-style: revert; font-style: revertLayer; font-style: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

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.

Exemple interactif avec la propriété font-style.

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 le a, le w, le f, 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.

1

Propriété
font-style

2

Valeur
de l'angle

Estimation de la prise en charge globale.

96%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété font-style.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale de la propriété.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Prise en charge de la valeur inherit pour récupérer la valeur du parent pour cette propriété.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Polices de caractères - Niveau 3

  Pas de changement concernant cette propriété.
  

  21 Juillet 1997

  Document de travail.

  

  03 Octobre 2013

  Candidat à la recommandation.

  

  14 Août 2018

  Proposé à la recommandation.

  

  20 Septembre 2018

  Recommandation.

• Module CSS - Polices de caractères - Niveau 4

  Possibilité d'indiquer un angle avec la valeur oblique.
  

  11 Juillet 2017

  Document de travail.

  

  

  

• Module CSS - Polices de caractères - Niveau 5

  Pas de changement concernant cette propriété.
  

  29 Juin 2021

  Document de travail.

  

  

  

Voir aussi, à propos des polices de caractères.

Les propriétés concernant les polices de caractères sont regroupées dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :

Propriétés :

Fonctions :

Directives :

Descripteurs :