Le descripteur 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 auteurs 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.

En lien avec les règles @@font-face
Valeur initialenormal
Médiatous
Valeur calculéecomme spécifié
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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.
oblique avec 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.
oblique avec un intervalle d'angle
Utilise une fonte comme oblique et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur oblique, aucune autre valeur n'est autorisée après normal ou italic.

Syntaxe formelle

normal | italic | oblique <angle>{0,2}

Exemples

Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :

@font-face {
  font-family: garamond;
  src: url('garamond.ttf');
}

unstyled Garamond

La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.

artificially sloped garamond

En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur src et indiquer que c'est une police italique via font-style. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.

@font-face {
  font-family: garamond;
  src: url('garamond-italic.ttf');
  /* On indique ici que la police est italique */
  font-style: italic;
}

italic garamond

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'font-style' dans cette spécification.
Version de travail Ajoute la possibilité d'utiliser le mot-clé oblique suivi par une valeur angulaire.
CSS Fonts Module Level 3
La définition de 'font-style' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 4Edge ? Firefox Support complet 3.5IE Support complet 4Opera Support complet 10Safari Support complet 3.1WebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,