La règle CSS @font-feature-values
La règle at-rule @font-feature-values définit des noms pour les fonctionnalités dans la propriété font-variant-alternates. Découvrez les valeurs et des exemples.
La règle at-rule @font-feature-values vous permet d'attribuer un nom lisible à un index numérique de fonctionnalité OpenType, afin de pouvoir faire référence aux glyphes alternatifs d'une police par leur nom plutôt que par un numéro brut lorsque vous utilisez la propriété font-variant-alternates.
Cette page explique le problème que résout cette règle, sa syntaxe, les blocs de fonctionnalités qu'elle accepte, et un exemple complet fonctionnel.
Pourquoi elle existe
De nombreuses polices OpenType proposent des glyphes alternatifs en plus de la forme par défaut de chaque caractère — des ornements décoratifs (swashes), des ornements, des variantes stylistiques, des formes historiques, etc. À l'intérieur de la police, chaque variante n'est identifiée que par un numéro (un index). Sans cette règle at-rule, vous devriez mémoriser que, par exemple, « l'ornement décoratif est l'index 1 » et coder ce numéro en dur partout.
@font-feature-values vous permet d'écrire ce mappage une seule fois, de donner à l'index un nom comme fancy, puis d'appeler swash(fancy) dans votre CSS. Le nom s'applique par famille de polices, ainsi deux polices différentes peuvent chacune définir leur propre swash fancy pointant vers des index différents.
Deux points à garder à l'esprit :
- Elle fonctionne exclusivement avec
font-variant-alternates— elle n'a aucun effet sur les autres propriétés. - Elle n'a d'effet que si la police correspondante est réellement chargée et que cette police contient les glyphes alternatifs référencés. Si vous devez activer des fonctionnalités OpenType de bas niveau par leur balise à quatre lettres, utilisez
font-feature-settings.
Elle peut être placée au niveau supérieur d'une feuille de style ou à l'intérieur d'une règle at-rule de groupe conditionnel telle que @media.
Blocs de fonctionnalités
Le corps de la règle at-rule peut contenir l'un de ces blocs nommés, chacun associant un nom à un index :
@swash@annotation@ornaments@stylistic@styleset@character-variant
Chaque nom de bloc correspond à la notation fonctionnelle associée dans font-variant-alternates (un nom @swash est utilisé par swash(), un nom @ornaments par ornaments(), etc.).
Syntaxe
Syntaxe de la règle at-rule CSS @font-feature-values
@font-feature-values <family-name> {
@swash { name: index; }
@annotation { name: index; }
@ornaments { name: index; }
@stylistic { name: index; }
@styleset { name: index; }
@character-variant { name: index; }
}Exemple de la règle at-rule @font-feature-values :
Exemple de la règle at-rule CSS @font-feature-values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@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);
}
</style>
</head>
<body>
<h2>@Font-feature-values at-rule example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>Ici, @swash { fancy: 1; } nomme l'index 1 de la police Leitura Display Swashes avec le nom fancy. Le paragraphe .variant active ensuite cette variante avec font-variant-alternates: swash(fancy). Comme la police nommée n'est pas chargée dans cet extrait, le texte revient à une police par défaut et les ornements décoratifs ne s'afficheront pas — l'objectif de l'exemple est de montrer le câblage, pas le résultat visuel. Remplacez-la par une police que vous possédez réellement via @font-face pour voir les variantes.
Compatibilité des navigateurs
@font-feature-values est prise en charge dans Firefox, Safari et Chrome/Edge (Chromium a ajouté la prise en charge dans la version 128, en août 2024). Internet Explorer ne l'a jamais prise en charge. Comme les glyphes alternatifs sont purement décoratifs, les traiter comme une amélioration progressive est sans risque : les navigateurs et les polices qui ne disposent pas de cette fonctionnalité afficheront simplement le glyphe par défaut.
Valeurs
| Valeur | Description |
|---|---|
| @swash | Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle swash() de font-variant-alternates. |
| @annotation | Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle annotation() de font-variant-alternates. |
| @ornaments | Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle ornaments() de font-variant-alternates. |
| @stylistic | Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle stylistic() de font-variant-alternates. |
| @styleset | Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle styleset() de font-variant-alternates. |
| @character-variant | Spécifie un nom de fonctionnalité qui fonctionne avec la notation fonctionnelle character-variant() de font-variant-alternates. |