Font-variant - Propriété CSS
Résumé des caractéristiques de la propriété font-variant
normal | none | small-caps | all-small-caps | petite-caps | all-petite-caps | titling-caps | unicasenormalfont-variant passe d'une valeur à l'autre sans transition.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 :
font-variant-alternates: gestion des glyphes alternatifs.font-variant-caps: capitalisation des caractères.font-variant-east-asian: règle de substitution des caractères pour les langues telles que le chinois ou le japonais.font-variant-emoji: emoticons.font-variant-ligatures: ligatures des lettres successives.font-variant-numeric: affichage des chiffres.font-variant-position: mise en exposant ou en indice de caractères.
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
normalinitialise toutes les propriétés individuelles defont-variantà leur valeur initiale. - font-variant: none;
La valeur
noneinitialise la propriétéfont-variant-ligaturesànoneet 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.
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 :
- Utilisation des formes alternatives des caractères (formes ornées, stylisées, etc) avec
font-variant-alternates. - Gestion d'effets spécifiques aux langues CJK
(propriété
font-variant-east-asian). - Présentations spécifiques aux nombres (fractions par exemple) :
font-variant-numeric. - Gestion des exposants et des indices avec
font-variant-position. - Activation ou désactivation des ligatures avec
font-variant-ligatures. - Et, encore plus récemment, la gestion des possibilités des polices avec emoji (
font-variant-emoji).
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.
font-variantNavigateurs 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
Historique de la propriété font-variant.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantfont-variant. Première définition de la propriétéfont-variant, acceptant seulement les valeursnormaletsmall-caps.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantfont-variant. Ajout de la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Polices de caractères - Niveau 3
Concernantfont-variant.font-variantest maintenant une propriété résumée permettant de définir les valeurs des propriétés dont le nom commence parfont-variant....21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.14 Août 2018Proposé à la recommandation.20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Concernantfont-variant. Pas de changement concernant la spécification defont-variant.11 Juillet 2017Document de travail.
Au sujet des polices de caractères, voir aussi...
La spécification Module CSS - Polices de caractères 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 :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.