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 :

@font-feature-values - Directive CSS

@font-feature-values

Résumé des caractéristiques de la directive @font-feature-values

Description rapide
Définit les variantes typographiques à utiliser.
Statut
Problèmes de compatibilité
Module W3C
Module CSS - Polices de caractères
Références (W3C)
Statut du document:: WD (document de travail)

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.

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 '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 Type nalt.

  • @font-feature-values 'nom-de-police' { @character-variant { } }

    Forme des caractères alternatives.
    Correspond aux codes Open Type de cv01 à cv99.

  • @font-feature-values 'nom-de-police' { @historical-form { } }
    s → s

    Caractères dans leur forme traditionnelle.
    Correspond au code Open Type hist.

  • @font-feature-values 'nom-de-police' { @ornaments { } }
    m → m

    Caractères et symboles décoratifs.
    Correspond au code Open Type ornm.

  • @font-feature-values 'nom-de-police' { @styleset { } }
    E → E

    Caractères avec des formes plus stylisées.
    Correspond aux codes Open Type de ss01 à ss20.

  • @font-feature-values 'nom-de-police' { @stylistic { } }
    b → b

    Caractères avec des formes plus stylisées.
    Correspond au code Open Type salt.

  • @font-feature-values 'nom-de-police' { @swash { } }
    U → U

    Autres formes des caractères.
    Correspond au code Open Type swsh.

Prise en charge par les navigateurs (compatibilité).

La directive @font-feature-values est maintenant bien reconnue par les navigateurs.

1
@font-feature-values
Estimation de la prise en charge en pourcentage du parc actuel.
90%

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.

Propriétés.

Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Ajustement du crénage entre caractères.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Sélectionne les styles italique ou oblique de la police de caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Applique une capitalisation des caractères.
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Mise en exposant ou en indice des caractères.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit une palette de couleurs appliable ensuite à une police de caractères.