Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - 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.

Description de la directive @font-feature-values.

@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.

LigatureLigature     LigatureLigature

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 'nom-de-la-police' { @ornaments { fleurons: 1 } }

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-variant-alternates: ornaments(fleurons); }

Un résultat comparable aurait pu être obtenu avec la propriété de bas niveau Object, mais avec une syntaxe moins claire, et surtout qui ne serait valable que pour une seule police :

p.deco { font-values-settings:'ornm'1; }

Syntaxes pour @font-feature-values.

  • @font-feature-values: @annotation{ };

  • @font-feature-values: @character-variant{ }

  • @font-feature-values: @ornaments { }

  • @font-feature-values: @styleset { }

  • @font-feature-values: @stylistic{ }

  • @font-feature-values: @swash{ }

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-family : Définit le nom de la police de caractères.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-ligatures : Active ou désactive la ligature des caractères.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.