La propriété CSS font-variant-alternates
La propriété CSS font-variant-alternates contrôle la sélection de glyphes alternatifs. Découvrez les valeurs et essayez des exemples.
La propriété CSS font-variant-alternates contrôle la sélection des glyphes alternatifs — les formes de caractères spéciales (ornements décoratifs, ensembles stylistiques, formes historiques, etc.) qu'une police OpenType peut fournir en complément de ses caractères par défaut.
Cette page explique ce que sont les glyphes alternatifs, comment les activer, comment chaque fonction correspond aux fonctionnalités OpenType, et les pièges à éviter.
Pourquoi utiliser des glyphes alternatifs ?
De nombreuses polices OpenType de haute qualité incluent des versions supplémentaires de certaines lettres. Un ornement décoratif peut ajouter une fioriture à une majuscule ; un ensemble stylistique peut transformer toute une famille de lettres en aspect calligraphique ; les formes historiques peuvent restituer le "ſ" long utilisé dans l'ancienne typographie. Par défaut, un navigateur affiche le glyphe standard — font-variant-alternates est la façon d'opter pour les alternates sans avoir à connaître les balises de fonctionnalités OpenType de bas niveau.
Vous utiliserez cette propriété lorsque vous souhaitez un rendu typographique soigné (logos, titres, texte d'affichage éditorial) et que la police choisie contient effectivement les glyphes alternatifs. Si la police ne possède pas d'alternates, la propriété n'a aucun effet visible.
Fonctionnement : @font-feature-values
La plupart des fonctions ci-dessous (stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation()) prennent un nom plutôt qu'un nombre. Ces noms lisibles sont définis une fois avec la règle at @font-feature-values, puis référencés depuis votre feuille de style. Cette indirection vous permet de donner des noms significatifs comme fancy ou circled aux index de fonctionnalités opaques qu'une police expose.
/* 1. Map a readable name to a feature index, per font family */
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1; }
}
/* 2. Reference the name in font-variant-alternates */
.title {
font-family: "Leitura Display Swashes";
font-variant-alternates: swash(fancy);
}L'exception est historical-forms, qui est un mot-clé simple et ne nécessite pas d'entrée @font-feature-values.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontVariantAlternates = "normal"; |
Syntaxe
Syntaxe de la propriété CSS font-variant-alternates
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Exemple de la propriété font-variant-alternates :
Exemple de la propriété CSS font-variant-alternates
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 2rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Font-variant-alternates property example</h2>
<p>This paragraph uses the swash alternate.</p>
<p class="variant">This paragraph uses the swash alternate.</p>
</body>
</html>Résultat
Valeurs
| Valeur | Description |
|---|---|
| normal | Aucune des fonctionnalités n'est activée. |
| historical-forms | Active l'affichage des formes historiques. |
| stylistic() | Active l'affichage des alternates stylistiques. |
| styleset() | Active l'affichage avec des ensembles stylistiques. |
| character-variant() | Active des alternatives stylistiques spécifiques pour les caractères. |
| swash() | Active les glyphes avec ornements décoratifs. |
| ornaments() | Active l'affichage des ornements. |
| annotation() | Active les formes d'annotation alternatives. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Vous pouvez combiner plusieurs fonctions dans une seule déclaration en les séparant par des espaces — par exemple font-variant-alternates: stylistic(alt-a) styleset(my-set);. Seul le mot-clé spécial normal ne peut pas être mélangé avec les fonctions.
Correspondance des fonctions avec les fonctionnalités OpenType
Si vous avez utilisé l'approche de bas niveau font-feature-settings, ce tableau indique la fonctionnalité OpenType à laquelle chaque fonction correspond :
| Fonction | Fonctionnalité OpenType | Utilisation typique |
|---|---|---|
historical-forms | hist | Long "ſ", formes de lettres archaïques. |
stylistic() | salt | Un glyphe alternatif unique choisi par nom. |
styleset() | ss01–ss20 | Un ensemble coordonné d'alternates. |
character-variant() | cv01–cv99 | Alternates par caractère pouvant être définis indépendamment. |
swash() | swsh / cswh | Fioritures décoratives sur les lettres. |
ornaments() | ornm | Ornements et marques décoratives. |
annotation() | nalt | Chiffres et lettres encerclés ou encadrés. |
Points à surveiller
- La police doit contenir l'alternate. Si la police active ne possède pas d'ornement décoratif ou d'ensemble stylistique, la propriété ne produit aucun effet — il n'existe pas de glyphe de remplacement.
- Les noms doivent être déclarés au préalable. Une fonction comme
swash(fancy)ne fonctionne que sifancyest mappé dans un bloc@font-feature-valuespour lafont-familycorrespondante. - Elle est héritée. Comme la propriété est héritée, appliquez-la sur l'élément le plus petit qui en a besoin (ou réinitialisez-la à
normalsur les enfants) pour éviter que les glyphes décoratifs ne s'infiltrent dans le texte environnant.
Propriétés associées
font-variant— le raccourci qui regroupe toutes les propriétés longuesfont-variant-*.@font-feature-values— définit les noms lisibles que cette propriété référence.font-family— sélectionne la police qui fournit les alternates.
Compatibilité des navigateurs
| Navigateur | Support |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |