Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

font-style - Propriété CSS

font-style

Résumé des caractéristiques de la propriété font-style

Description rapide
Sélectionne les styles italique ou oblique de la police de caractères.
Statut
Standard
Type de valeur
Valeur prédéfinie | Angle
Valeurs prédéfinies
normal | italic | oblique
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété font-style passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Statut du document:: Ancienne norme, obsolète

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.

Syntaxe de font-styleSchéma syntaxique de la propriété CSS font-style (caractères en italiques ou obliques). normal normal italic italic oblique oblique angle anglefont-style:;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 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 valeur italic.

    aperçu
    font-style:normal;
    aperçu
    font-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.

Animation

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 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.

Police :

font-style :

Voyez le brick géant que j'examine près du wharf.

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.

Colonne 1
Support par les navigateurs de la syntaxe de la propriété CSS font-style.
Colonne 2
Support de la possibilité d'indiquer l'angle d'inclinaison pour les polices en oblique.
1
font-style
2
Angle
Estimation de la prise en charge en pourcentage du parc actuel.
96%
96%

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.

Propriétés.

Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Ajustement du crénage entre caractères.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Applique une capitalisation des caractères.
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Mise en exposant ou en indice des caractères.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit les variantes typographiques à utiliser.
Définit une palette de couleurs appliable ensuite à une police de caractères.