Font-variant-alternates - Propriété CSS
Résumé des caractéristiques de la propriété font-variant-alternates
normal | historical-forms | annotation(ann) | character-variant(cv01) | ornaments(ornm) | styleset(ss) | stylistic(styl) | swash(swsh)normalfont-variant-alternates passe d'une valeur à l'autre sans transition.Syntaxe de font-variant-alternates (schéma).
font-variant-alternates.Détails sur les valeurs.
Télécharger le schéma en SVG
Description de la propriété font-variant-alternates.
Quoiqu'il en soit
font-variant-alternates sera toujours dépendante des polices utilisées.
De nombreuses polices de caractères proposent souvent plusieurs glyphes pour chacun des caractères.
Il y a le glyphe standard, mais aussi la variante ornée, la version historique (old style), la version stylistique, etc.
font-variant-alternates permet de choisir quelle variante doit être utilisée.
Malheureusement il n'y a aucune règle qui impose la dénomination ou l'ordre de ces variantes dans la police de caractères. On ne peut donc pas écrire de règle CSS qui sélectionnerait la variante numéro 1, ou la variante numéro 3, car d'une police à l'autre ces variantes (si elles existent) ne seraient pas forcément équivalentes.
Pour cette raison font-variant-alternates travaille en collaboration avec la directive @font-feature-values :
@font-feature-valuesnomme les variantes que l'ont souhaite utiliser en indiquant leur famille et leur emplacement dans la police choisie.font-variant-alternatesapplique ces variantes nommées aux éléments du document HTML.
Les variantes restent malgré tout classées par familles : historiques, ornées, stylistiques, etc. Le mieux est d'expliquer tout ça sur un exemple.
Dans le code ci-dessous, la première directive @font-face indique le nom de la police (Countryside)
et où la télécharger.
La deuxième directive (@font-feature-values) indique que, pour cette police Countryside, la variante
que nous appelons "belles-boucles" est la première des variantes de la famille swash.
Enfin la propriété font-variant-alternates est utilisée pour appliquer cette variante "belles-boucles" à l'élément
dont l'ID est "exemple1".
@font-face{
font-family:'Countryside';
src:url('fonts/countryside.ttf');
}
@font-feature-values Countryside {
@swash {belles-boucles: 1;}
}
#exemple1 {
font-family: 'Countryside', fantasy;
font-variant-alternates: swash(belles-boucles);
}
Ce qui donne le résultat ci-dessous (finalement assez peu lisible 😉 mais sans contexte avec de belles boucles).
Pour l'instant (2022), seul Firefox traite correctement font-variant-alternates et les directives associées.
Il se peut donc que vous ne voyiez rien de plus qu'une police fantaisie dans le cadre ci-dessus.
Mais voici une copie d'écran de ce qu'il faudrait obtenir avec un navigateur compatible.
(simulation)
Pour compléter ces explications, reportez-vous aux pages sur les directives @font-face et @font-feature-values.
Valeurs pour font-variant-alternates.
- font-variant-alternates: normal;
Valeur par défaut. Aucun traitement typographique n'est effectué. Ce sont les glyphes des caractères standards qui sont utilisés.
- font-variant-alternates: historical-forms;
Active la variante historique. Il s'agit en général de caractères dont la forme rappelle les anciens caractères d'imprimerie. Notez qu'il n'y a pas lieu ici de préciser le nom de la variante historique et donc, qu'une déclaration avec
@font-feature-valuesn'est pas nécessaire.Cette syntaxe est équivalente à
font-feature-settings:'hist' - font-variant-alternates: annotation(nom1);
Active une des variantes de la famille "annotation", celle dont le nom est
nom1.Les variantes du type
annotationsont des caractères utilisables pour des numérotations (lettres ou chiffres entourés par exemple).Le même effet peut être obtenu avec la propriété
font-feature-settings:'nalt' - font-variant-alternates: character-variant(nom1);
Active une des variantes de la famille "character-variant", celle dont le nom est
nom1.Ces variantes permettent généralement d'afficher des caractères spécifiques, par exemple pour faciliter leur saisie alors qu'ils ne sont pas accessibles au clavier. Cela correspond aux codes Open Type
cv01,cv02, etc.Le même effet peut être obtenu avec la propriété
font-feature-settings:'cv01'(oucv02,cv03, etc. jusqu'àcv99). - font-variant-alternates: ornaments(nom1);
Active une des variantes de la famille "ornaments", celle dont le nom défini par
@font-feature-valuesestnom1.Les ornements sont des éléments graphiques tels que des fleurons, des filets, des puces, etc. Certaines polices proposent toute une liste d'ornements pour agrémenter une composition.
Les ornements peuvent être affichés aussi avec la propriété
font-feature-settings:'ornm' - font-variant-alternates: styleset(nom1);
Active une des variantes de la famille "styleset", celle dont le nom est
nom1.Les variantes
stylesetpeuvent également être affichées avec la propriétéfont-feature-settings:'ss01'(ouss02,ss03, etc. jusqu'àss20). - font-variant-alternates: stylistic(nom1);
Active une des variantes de la famille "stylistique", celle dont le nom est
nom1.Ces variantes peuvent aussi être affichées avec la propriété
font-feature-settings:'salt' - font-variant-alternates: swash(nom1);
Active une des variantes de la famille "swash", celle dont le nom défini par
@font-feature-valuesestnom1.Ces variantes correspondent généralement à des caractères très ornés, avec des boucles supplémentaires, des crochets, etc.
Les variantes ornées peuvent aussi être affichées avec
font-feature-settings:'swsh' - font-variant-alternates: swash(nom1) stylistic(nom1);
Comme on le voit sur cet exemple de syntaxe, il est possible de cumuler plusieurs variantes en les séparant par un espace.
- font-variant-alternates: initial; (
normal) font-variant-alternates: inherit; font-variant-alternates: revert; font-variant-alternates: revertLayer; font-variant-alternates: unset;Liens vers la présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,unset.
Possibilité d'animation de la propriété font-variant-alternates.
Le cadre ci-dessous montre ce que donne l'Possibilité d'animation de la propriété font-variant-alternates. L'effet est finalement plus intéressant
lorsque l'animation se fait entre deux variantes très peu différentes.
Simulateur avec la propriété font-variant-alternates.
Le simulateur active les glyphes alternatifs de la police, dans la mesure où ils existent.
Tous les identifiants (ann, char, hist, etc.) ont été définis par une directive
@font-feature-values.
Support de font-variant-alternates.
La prise en charge de la propriété font-variant-alternates est encore trop limitée (2022), même sur les navigateurs les plus courants.
Remarques :
(1) Utiliser la propriété de bas niveau font-feature-settings avec les codes salt, ss01 à ss20, swsh, etc.
font-variant-alternatesNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Firefox
Safari
Safari sur IOS
Chrome
Opéra
Edge
Chrome pour Androïd
Firefox pour Androïd
Androïd Brower
KaiOS Browser
Opéra mini
Évolution de la propriété font-variant-alternates.
-
Module CSS - Polices de caractères - Niveau 4
Première présentation de la propriétéfont-variant-alternates.
11 Juillet 2017Document de travail.
Voir aussi, à propos des polices de caractères.
La propriété font-variant-alternates, ainsi que toutes celles concernant les polices de caractères sont regroupées dans le module CSS Fonts Module.
Vous trouvez les définitions suivantes dans ce module :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.