font-variant-alternates
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La propriété CSS font-variant-alternates
contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencés par les noms définis avec la règle @ @font-feature-values
.
/* Valeurs avec un mot-clé */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;
/* Valeurs avec une notation fonctionnelle */
font-variant-alternates: stylistic(identifiant-utilisateur);
font-variant-alternates: styleset(identifiant-utilisateur);
font-variant-alternates: character-variant(identifiant-utilisateur);
font-variant-alternates: swash(identifiant-utilisateur);
font-variant-alternates: ornaments(identifiant-utilisateur);
font-variant-alternates: annotation(identifiant-utilisateur);
font-variant-alternates: swash(ident1) annotation(ident2);
/* Valeurs globales */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;
La règle @ @font-feature-values
définit les noms associés aux valeurs OpenType pour les différentes fonctions de glyphes alternatifs (stylistic
, styleset
, character-variant
, swash
, ornament
ou annotation
). Ces propriétés permettent d'utiliser des noms adaptés (définis avec @font-feature-values
) dans la feuille de styles.
Syntaxe
Cette propriété peut être définie selon deux formes :
- la première avec le mot-clé
normal
- la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-après. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.
Valeurs
normal
-
Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.
historical-forms
-
Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType
hist
. stylistic()
-
Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associée à un nombre. Elle correspond à la valeur OpenType
salt
, par exemplesalt 2
. styleset()
-
Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType
ssXY
(par exempless02
). character-variant()
-
Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à
styleset()
mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenTypecvXY
(par exemplecv02
). swash()
-
Cette fonction active l'affichage des glyphes pour les lettres ornées. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType
swsh
etcswh
(par exempleswsh 2
oucswh 2
). ornaments()
-
Cette fonction active l'affichage des ornements tels que les fleurons et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType
ornm
(par exempleornm 2
).Note : Afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (
U+2022
). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité. annotation()
-
Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType
nalt
(par exemplenalt 2
).
Définition formelle
Valeur initiale | normal |
---|---|
Applicabilité | all elements and text. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Syntaxe formelle
font-variant-alternates =
normal |
[ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]
<feature-value-name> =
<ident>
Exemples
Activer l'affichage de glyphes pour les lettres ornées
HTML
<p>MDN c'est là !</p>
<p class="variant">MDN c'est là !</p>
CSS
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
Résultat
Note : Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur fontsgeek.com.
Spécifications
Ne fait partie d'aucun standard.
Compatibilité des navigateurs
BCD tables only load in the browser