Font-variant - Propriété CSS

font-variant

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

Description rapide
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
normal | none | small-caps | all-small-caps | petite-caps | all-petite-caps | titling-caps | unicase
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-variant 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: REC (recommandation)
Statut du document: REC (recommandation)

Description de la propriété font-variant.

Initialement, en CSS2, la propriété font-variant définissait simplement la capitalisation des caractères (écriture en petites capitales par exemple). Mais cela a beaucoup évolué : en CSS3 font-variant définit de nombreux paramètres typographiques avancés comme la ligature ou la substitution de caractères. C'est maintenant une propriété résumée qui correspond aux propriétés suivantes :

Toutes les valeurs ne sont pas forcément spécifiées mais celles qui ne le sont pas seront remises à leur valeur initiale. Ignorer une valeur ne la laisse donc pas inchangée.

font-variant et les propriétés dérivées ci-dessus fonctionnent avec les polices du type OTF ou WOFF.

Exemples de syntaxes pour font-variant.

  • font-variant: normal;

    Valeur par défaut. La valeur normal initialise toutes les propriétés individuelles de font-variant à leur valeur initiale.

  • font-variant: none;

    La valeur none initialise la propriété font-variant-ligatures à none et toutes les autres propriétés individuelles à leur valeur initiale.

  • font-variant: small-caps oldstyle-nums common-ligatures;

    Exemple d'une syntaxe définissant la valeur de plusieurs propriétés individuelles. Cette écriture est équivalente à :

    fontVariantAlternates: initial; font-variant-caps: small-caps; font-variant-east-asian: initial; font-variant-emoji: initial; font-variant-ligature: common-ligatures; font-variant-numeric: oldstyle-nums; font-variant-position: initial;

Valeurs communes à toutes les propriétés :

font-variant: initial (normal) font-variant: inherit font-variant: revert font-variant: revertLayer font-variant: unset

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

Animation de font-variant et des propriétés individuelles.

Toutes les propriétés relatives à font-variant peuvent être animées. Reportez-vous à la page de chacune de ces propriétés pour voir des exemples d'animations.

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

Le simulateur ne propose que les valeurs déjà définies en CSS2, qui sont en principe bien reconnues par tous les navigateurs, et utilisables avec toutes les polices.. Mais toutes les valeurs relatives aux propriétés font-variant... individuelles sont également acceptées par la propriété résumée font-variant. Reportez-vous à ces différentes propriétés pour plus de précisions et d'autres simulateurs.

font-variant :
Buvez de ce whisky 1982 que le patron juge fameux.

Prise en charge et compatibilité des navigateurs.

Les anciennes valeurs de font-variant (définies en CSS2) sont bien reconnues par tous les navigateurs actuels. Il s'agit en gros des valeurs correspondant à font-variant-caps (normal,small-caps, all-small-caps, etc). Par contre les nouvelles possibilités définies en CSS3 sont bien moins reconnues. Reportez-vous aux pages des propriétés individuelles pour plus de détails :

De plus, toutes ces propriétés utilisant les possibilités des polices OTF (OpenType Font), elles sont très dépendantes de la police de caractères utilisée. Peu de polices proposent toutes les possibilités.

1
Propriété
font-variant
Estimation de la prise en charge globale.
96%

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

Historique de la propriété font-variant.

Au sujet des polices de caractères, voir aussi...

La spécification CSS Fonts Module regroupe tout ce qui concerne les polices de caractères, la typographie, l'exploitation des possibilités des formats de polices modernes, le téléchargement de polices, etc.

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-stretch
Modifie l'étirement ou la compression des caractères.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
⚠
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
⚠
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.