@font-feature-values - Directive CSS
Résumé des caractéristiques de la directive @font-feature-values
Description de la directive @font-feature-values.
@font-feature-values est une directive du langage CSS. Elle permet d'utiliser plus facilement les
possibilités typographiques des polices WOFF,
en particulier la substitution de caractères : remplacement de certaines majuscules par des
caractères plus ornés, remplacement de lettres par des symboles, etc.
Plus précisément @font-feature-values définit les variantes typographiques qui seront ensuite
utilisées par la propriété font-variant-alternates.
Les polices de caractères TTF, OTF, WOFF, etc. permettent le remplacement de caractères conditionnel. On peut par exemple remplacer les lettres f i, lorsqu'elles se suivent, par le caractère fi (ligature) ou choisir une forme de lettre (glyphe) différente de façon occasionnelle.
⟹
⟹
Pour plus d'informations sur les possibilités de substitution de caractères, reportez-vous la page sur font-feature-settings.
Mais le codage des caractères de substitution n'est pas forcément le même dans toutes les polices de
caractères. Par exemple, le caractère 𝒜 peut être obtenu dans le jeu de caractères
'aalt'1 pour une première police, et dans le jeu de caractères 'swsh'2
dans une autre police. Il peut également être inexistant dans une troisième police.
Ce problème est particulièrement ennuyeux lorsque la police demandée n'est pas disponible, car le navigateur va alors en utiliser une autre,
et les caractères de substitution ne vont plus correspondre.
@font-feature-values permet de simplifier l'utilisation des substitutions de caractères en leur associant
des identifiants clairs, parlants, et propres à chacune des polices.
Voici par exemple comment définir une variante stylistique dénommée fleurons, correspondant
à la première variante disponible dans la police.
@font-feature-values 'Police1' {
@ornaments { fleurons: 1 }
}
@font-feature-values 'Police2' {
@ornaments { fleurons: 3 }
}
Cette variante est ensuite utilisée par font-variant-alternates. Dans l'exemple on
l'applique à tous les paragraphes de la classe deco.
p.deco {
font-family: 'Police1', 'Police2';
font-variant-alternates: ornaments(fleurons);
}
Un résultat comparable aurait pu être obtenu avec la propriété de bas niveau font-feature-settings,
mais avec une syntaxe moins claire, et surtout qui ne serait valable que pour une seule police :
p.deco {
font-family: 'Police1', 'Police2';
font-values-settings:'ornm'1; /* Incorrect pour Police2 */
}
Syntaxes pour @font-feature-values.
- @font-feature-values 'Warnock', 'Countryside' { @annotation {demo-nalt:1;} }
Glyphes adaptés aux annotations, par exemple des caractères entourés d'un cercle, ou entre parenthèses.
Correspond au code Open Typenalt.
La variante définie peut être utilisée avecfont-variant-alternateset la fonctionannotation().
(L'exemple ci-dessous est une simulation).Caractère standard 1 font-feature-settings:'nalt'1;➀ font-variant-alternates:annotation(demo-nalt); - @font-feature-values 'Warnock', 'Countryside' { @character-variant {demo-cv:3 1;} }
Forme des caractères alternatives.
Correspond aux codes Open Type decv01àcv99.
La variante définie peut être exploitée avecfont-variant-alternateset la fonctioncharacter-variant().Une ou deux valeurs peuvent être indiquées, avec le fonctionnement suivant :
demo: 2associe cv02 à 1.
demo: 2 3associe cv02 à 3.Caractère standard A font-feature-settings:'cv01'on;A font-variant-alternates:character-variant(demo-cv);A - @font-feature-values 'Warnock', 'Countryside' { @historical-forms { } }
Caractères dans leur forme traditionnelle.
Correspond au code Open Typehist.
Cette possibilité est prévue dans la syntaxe mais ne semble pas exploitable avecfont-variant-alternates.Caractère standard s font-feature-settings:'hist'on;s font-variant-alternates:historical-forms;s - @font-feature-values 'Warnock', 'Countryside' { @ornaments {demo-ornm: 1;} }
Caractères et symboles décoratifs.
Correspond au code Open Typeornm.
La variante définie est exploitable avecfont-variant-alternateset la fonctionornaments().Caractère standard m font-feature-settings:'ornm'on;m font-variant-alternates:ornaments(demo-ornm);m - @font-feature-values 'Warnock', 'Countryside' { @styleset {demo-ss: 1 2 5;} }
Caractères avec des formes plus stylisées.
Correspond aux codes Open Type dess01àss20.
La variante ainsi définie est exploitable avecfont-variant-alternateset la fonctionstyleset().Plusieurs valeurs peuvent être spécifiées : toutes ces variante seront associées à l'identifiant. Notre exemple associe les variantes
ss01,ss02etss02à l'identifiantdemo-ss.Caractère standard E font-feature-settings:'ss01'on;E font-variant-alternates:styleset(demo-ss);E - @font-feature-values 'Warnock', 'Countryside' { @stylistic {demo-salt:1;} }
Caractères avec des formes plus stylisées.
Correspond au code Open Typesalt.
La variante définie est utilisable avec la propriétéfont-variant-alternateset la fonctionstylistic().Avec la police que nous avons utilisée (
Countryside) la différence se voit peu: : cependant on voit une différence dans la forme des lettres m et o.Caractère standard Démo font-feature-settings:'salt'on;Démo font-variant-alternates:stylistic(demo-salt);Démo - @font-feature-values 'Warnock','Countryside' { @swash {demo-swsh:1;} }
Autres formes des caractères.
Correspond au code Open Typeswsh.
La variante définie est utilisable avec la propriétéfont-variant-alternateset la fonctionswash().Caractère standard U font-feature-settings:'swsh'on;U font-variant-alternates:swash(demo-swsh);U
Prise en charge par les navigateurs (compatibilité).
La directive @font-feature-values est maintenant bien reconnue par les navigateurs, mais les variantes peuvent exister ou non suivant la police de caractères choisie.
@font-feature-valuesNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Baidu Browser
QQ Browser
Opéra Mobile
Firefox
Chrome
Safari
Edge
Opéra
Chrome pour Androïd
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Évolution de la directive @font-feature-values.
-
Module CSS - Polices de caractères - Niveau 4
Introduction de la directive@font-feature-valuesen rapport avec les possibilités des nouveaux formats de police de caractères : remplacement, ornements...
11 Juillet 2017Document de travail.
Voir aussi, au sujet des polices de caractères.
La directive @font-feature-values est décrite dans la spécification CSS Fonts Module.
Ces autres définitions sont également présentées dans ce même 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.