@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 'nom-de-police' { @annotation { } }
Glyphes adaptés aux annotations, par exemple des caractères entourés d'un cercle, ou entre parenthèses.
Correspond au code Open Typenalt
. - @font-feature-values 'nom-de-police' { @character-variant { } }
Forme des caractères alternatives.
Correspond aux codes Open Type decv01
àcv99
. - @font-feature-values 'nom-de-police' { @historical-form { } }s → s
Caractères dans leur forme traditionnelle.
Correspond au code Open Typehist
. - @font-feature-values 'nom-de-police' { @ornaments { } }m → m
Caractères et symboles décoratifs.
Correspond au code Open Typeornm
. - @font-feature-values 'nom-de-police' { @styleset { } }E → E
Caractères avec des formes plus stylisées.
Correspond aux codes Open Type dess01
àss20
. - @font-feature-values 'nom-de-police' { @stylistic { } }b → b
Caractères avec des formes plus stylisées.
Correspond au code Open Typesalt
. - @font-feature-values 'nom-de-police' { @swash { } }U → U
Autres formes des caractères.
Correspond au code Open Typeswsh
.
Prise en charge par les navigateurs (compatibilité).
La directive @font-feature-values
est maintenant bien reconnue par les navigateurs.
@font-feature-values
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que @font-feature-values
.
Les spécifications CSS éditées par le W3C sont organisées en modules. @font-feature-values
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.