CSS - Propriété font-variant
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).
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é raccourcie qui correspond aux propriétés suivantes :
font-variant-caps
: capitalisation des caractères.font-variant-numeric
: affichage des chiffres.font-variant-alternates
: gestion des glyphes alternatifs.font-variant-ligatures
: ligatures des lettres successives.font-variant-east-asian
: règle de substitution des caractères pour les langues telles que le chinois ou le japonais.
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.
Syntaxes pour font-variant
.
font-variant: normal;
Valeur par défaut. La valeur
normal
initialise toutes les propriétés individuelles defont-variant
à leur valeur initiale.font-variant: none;
La valeur
none
initialise la propriété Object à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 à :
font-variant-caps: small-caps; font-variant-numeric: oldstyle-nums; font-variant-ligature: common-ligatures;
font-variant:
initial
;La valeur initiale est
normal
.-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
Le simulateur ci-dessous vous donne une idées des possibilités typographiques de CSS et
des polices OTF/WOFF.
Pour une présentation plus complète, reportez-vous aux propriétés spécifiques de la famille
font-variant
.
font-variant
:
Affichage des fractions : 3/4 270/1000
Prise en charge et compatibilité des navigateurs.
Les anciennes valeurs de font-variant
(normal
,small-caps
) sont
bien reconnues par tous les navigateurs actuels.
Les possibilités liées aux polices OTF (OpenType Font) sont très liées à la police de caractères utilisée. Peu de polices proposent toutes les possibilités.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Il en et de même pour les affichages de nombres particuliers tels que les fractions.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Polices et caractères - Propriétés.
font
: Raccourci pour définir la plupart des propriétés concernant les polices de caractères.font-display
: Détermine le comportement du navigateur face aux polices de caractères longues à charger.font-family
: Définit le nom de la police de caractères.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-size
: Ajuste la taille des caractères.font-size-adjust
: Définition du coefficient d'aspect de la police.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-variant-alternates
: Met en uvre 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-ligatures
: Active ou désactive la ligature des caractères.font-variant-numeric
: Met en uvre les modes d'affichage des nombres évolués : fractions, numéros, etc.font-weight
: Sélectionne une graisse pour les caractères.text-decoration
: Choisit le soulignement, le surlignement ou la rayure du texte.text-decoration-color
: Définit la couleur du trait de décoration.text-decoration-line
: Type de décoration : souligné, barré, etc.text-decoration-style
: Type de trait pour la décoration : plein, pointillé, etc.text-shadow
: Ombrage du texte.text-transform
: Casse du texte (minuscules, majuscules...).
Polices et caractères - Directives.
@charset
: Indique le jeu de caractères utilisé dans la feuille de styles.@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.