Propriété CSS font-variant-alternates
La propriété font-variant-alternates permet de contrôler la sélection des glyphes alternatifs.
Les noms des fonctions de glyphes alternatifs (styleset, stylistic, character-variant, ornament, swash, annotation) peuvent être définis dans @font-feature-values. Les noms lisibles par l'homme spécifiés dans @font-feature-values sont autorisés dans la feuille de style.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. Il s'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontVariantAlternates = "normal"; |
Syntaxe
Syntaxe de la propriété CSS font-variant-alternates
css
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
html
<!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 fonctionnalité n'est activée. |
| historical-forms | Active l'affichage des formes historiques. |
| stylistic() | Active l'affichage des alternatifs 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 swash. |
| ornaments() | Active l'affichage des ornements. |
| annotation() | Active les formes d'annotation alternatives. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Compatibilité des navigateurs
| Navigateur | Support |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |
Pratique
Quelle est la fonction de la propriété 'font-variant-alternates' en CSS ?