Font-feature-settings - Propriété CSS

font-feature-settings

Résumé des caractéristiques de la propriété font-feature-settings

Description rapide
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Statut
Problèmes de compatibilité ⚠
Utilisable sur
HTML
Valeurs prédéfinies
normal
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété font-feature-settings passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Syntaxe de font-feature-settings (schéma).

Font-feature-settings property - Syntax diagramSyntax diagram of the font-feature-settings CSS property. See stylescss.free.fr for details. 'xxxx' 'xxxx' on on off off integer integer , ,font-feature-settings:;font-feature-settings:;
Schéma syntaxique de la propriété font-feature-settings
Syntaxe détaillée

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

  • xxxx est le code d'une variante proposée par la police de caractères.
  • integer est un numéro, nécessaire lorsque plusieurs variantes existent sur le même code.

Description de la propriété font-feature-settings.

⚠
La syntaxe particulière de cette propriété (une énumération d'options) perturbe le mécanisme d'héritage. Parmi le nombreuses possibilités qu'elle offre, beaucoup sont accessibles à travers d'autres propriétés comme font-variant et ses dérivées. Nous vous conseillons d'utiliser plutôt les autres propriétés chaque fois que cela est possible.

La lecture de cette page est néanmoins utile pour la compréhension des possibilités des polices OTF.

font-feature-settings permet d'exploiter toutes les possibilités typographiques des polices de caractères OTF : substitution de caractères, ligatures, gestion des espacements, etc.

Il est donc clair que le résultat sera fortement dépendant de la police utilisée. Si une des options demandées n'est pas traitée par la police, elle est simplement ignorée. Si certaines valeurs comme tnum ou smcp donnent des résultats à peu près équivalents dans toutes les polices, il n'en est pas de même pour la plupart des autres valeurs : swsh par exemple peut être tout simplement sans effet sur certaines polices, ou produire un résultat spécifique à la police utilisée.

Pour cette raison, les exemples illustrant cette page utilisent parfois des polices fantaisistes : les polices courantes ne proposaient pas la fonctionnalité nécessaire.

font-feature-settings est aussi un descripteur, qui peut être utilisé dans le contexte de la directive @font-face.

Propriétés standards équivalentes.

Lorsqu'une propriété CSS existe, il est fortement recommandé d'utiliser cette propriété au lieu de font-feature-settings. Voici les valeurs pour font-feature-settings et leur équivalent en CSS.

ValeursDescriptionsSyntaxes CSS équivalente
kern
vkrn		 Crénage horizontal
Crénage vertical		 font-kerning: normal; (1)
liga
clig		 Ligatures standards
Ligatures contextuelles		 font-variant-ligatures: common-ligatures;
dlig Ligatures discrétionnaires font-variant-ligatures: discretionary-ligatures;
calt Ligatures contextuelles variante font-variant-ligatures: contextual;
subs
sups		 En indice
En exposant		 font-variant-position: sub;
font-variant-position: super;
smcp
c2sc
pcap
c2pc		 Minuscules en petites capitales
Tout en petites capitales
Petites capitales
Tout en petites capitales		 font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
unic Unicase font-variant-caps: unicase;
titl Casse de titre font-variant-caps: titling-caps;
lnum
onum		 Chiffres alignés
Chiffres décalés		 font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;
pnum
tnum		 Chiffres largeur variable
Chiffre largeur fixe		 font-variant-numeric: proportional-nums;
font-variant-numeric}: tabular-nums;
frac
afrc		 Fractions en diagonale
Fractions superposées		 font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
ordn Chiffres pour numérotations font-variant-numeric: ordinal;
zero Zéros barrés font-variant-numeric: slashed-zero;
hist
salt		 Glyphes historiques
Glyphes stylisés		 font-variant-alternates: historical-forms;
font-variant-alternates: stylistic;
cv01
swsh
ornm
nalt		 Variante de glyphes
Variante avec boucles
Variante d'ornement
Variante pour annotations		 font-variant-alternates: character-variant(); (2)
font-variant-alternates: swash(); (2)
font-variant-alternates: ornaments(); (2)
font-variant-alternates: annotation(); (2)
jp78
jp83
jp90
jp04		 Formes des caractères CJK font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
smpl
trad		 Forme simplifiée des caractères CJK
Forme traditionnelle des caractères CJK		 font-variant-east-asian: simplified;
font-variant-east-asian: traditional;
fwid
pwid		 Pleine largeur des caractères CJK
Largeur proportionnelle des caractères CJK		 font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;
ruby Caractères pour annotations Ruby font-variant-east-asian: ruby;

(1) La propriété font-kerning ajuste le crénage horizontal ou vertical suivant la valeur de la propriété writing-mode.

(2) La variante stylistique à utiliser peut être définie par la directive @font-feature-values.

Héritage de font-feature-settings.

En principe, les valeurs affectées à font-feature-settings sont héritées à tous les descendants, mais nous allons voir que ce n'est pas aussi simple, particulièrement lorsqu'un élément enfant souhaite modifier une valeur.

La syntaxe de font-feature-settings accepte une ou plusieurs valeurs séparées par des virgules. Par exemple pour forcer le texte en petites capitales et en oblique, on écrira la règle suivante :

font-feature-settings: 'smcp', 'slnt';

Si un élément, parmi les descendants, doit afficher des zéros barrés, il faut activer l'option 'zero' , il va falloir écrire une règle reprenant toutes les options héritées, ce qui suppose de les connaître, et qui est de toute façon peu pratique.

font-feature-settings: 'smcp', 'slnt', 'zero';

En effet, écrire seulement font-feature-settings:'zero'; désactive les options héritée 'smcp' et 'slnt'.

La syntaxe de font-feature-settings est donc mal adaptée au mécanisme d'héritage habituel en CSS. On s'efforcera de n'utiliser cette propriété que très localement, d'autant plus que de nombreuses possibilités qu'elle offre sont également disponibles à travers d'autres propriétés, avec une syntaxe plus standard.

Polices de caractères utilisées sur cette page.

Des polices fournies par Google.

Pour consulter un catalogue des polices disponibles chez Google, reportez-vous à la page Google Fonts.
La mise en œuvre de ces polices nécessite une déclaration dans la section head de chacune des pages qui les utilise :

link href="https://fonts.googleapis.com/css?family=nom_de_la_police" rel="stylesheet"

Des polices téléchargées depuis notre serveur.

Leur mise en œuvre se fait avec une directive @font-face dans la feuille de styles.

@font-face { font-family:'nom de la police'; src:url('chemin/fichier.otf'); }

Crédit des polices utilisées sur cette page.

Valeurs pour font-feature-settings.

'xxxx' est le nom d'une variante proposée par la police de caractères. Ces valeurs doivent être entre guillemets ou entre apostrophes ce qui est inhabituel dans la syntaxe CSS. Cela s'explique par le fait que ces valeurs ne sont pas des valeurs CSS mais des options proposées par la police de caractères.
n est un numéro de variante.

Il est fréquent de définir plusieurs variantes, en les séparant par des virgules. Il est possible également de désactiver une valeur en la faisant suivre de off (le mot on peut être utilisé mais est facultatif).
Certaines valeurs comme ornm donnent accès à plusieurs variantes. Il convient alors de préciser la variante à utiliser.

Accès rapide aux Valeurs pour font-feature-settings.

 

c2sc : Majuscules en petites majuscules.
c2pc : Majuscules en petites capitales.
aalt : Variantes alternatives.
calt : Variantes contextuelles.
ccmp : Composition de glyphes.
clig : Ligatures diverses.
cswh : Variantes ornées.
dlig : Ligatures conditionnelles.
dnom : Chiffres remontés.
frac : Fractions.
fwid : Pleines chasses.
halt : Variantes de demies chasses.
hist : Variantes historiques.
hkna : Variantes kana horizontales.
hlig : Ligatures historiques.
hwid : Demies chasses.
ital : Italiques.
jp04 : Forme jp04.
jp78 : Forme jp78.
jp83 : Forme jp83.
jp90 : Forme jp90.
kern : Crénage.
liga : Ligatures standards.
lnum : Chiffres alignés.
locl : Formes locales.
nalt : variantes de formes d'annotations.
nlck : Formes Kanji.
numr : Chiffres abaissés.
onum : Chiffres non alignés.
opsz : Glyphes en fonction de la taille.
ordn : Chiffres ordinaux.
ornm : Ornements.
palt : Variante de chasse proportionnelle.
pcap : Petites capitales.
pkna : Caractères kana proportionnels.
pnum : Chiffres en espacement proportionnel.
pwid : Chasse proportionnelle.
qwid : Quarts de chasses.
ruby : Forme ruby.
salt : Variante stylistique.
sinf : Caractères abaissés.
slnt : Caractères obliques.
smcp : Petites capitales.
ss.. : Variantes stylistiques.
subs : Indices.
sups : Exposants.
swsh : Lettres paraphées.
titl : Variantes pour titres.
tnum : Chiffres en espacements fixes.
trad : Forme traditionnelle.
twid : Tiers de chasses.
vert : Variantes verticales.
vhal : Espacements en écriture verticale.
vpal : Espacements en écriture verticale.
vkna : Variantes kana verticales.
vkrn : Crénage vertical.
zero : Zéros barrés.

Capitalisation des caractères avec font-feature-settings.

Lorsque c'est possible, utilisez de préférence la propriété standardisée font-variant-caps mais cette dernière n'implémente pas encore toutes les possibilités de capitalisation.

  • font-feature-settings: 'smcp';

    Transforme les caractères minuscules en petites majuscules : le glyphe est celui des majuscules et la hauteur celle des minuscules. Les caractères en majuscules ne sont pas modifiés.

    Démonstration
    'smcp'off
  • font-feature-settings: 'c2sc';

    Transforme les caractères majuscules en petites majuscules. Leur glyphe est inchangé mais leur taille est réduite à celle des minuscules. Les caractères en minuscules ne sont pas modifiés.

    Démonstration
    'cs2c'off
  • font-feature-settings: 'pcap';

    Transforme les caractères minuscules en petites capitales. Les caractères en majuscules ne sont pas modifiés.

    Démonstration
    'pcap'off
  • font-feature-settings: 'c2sc';

    Transforme les caractères majuscules en petites capitales. Les caractères en minuscules ne sont pas modifiés.

    Démonstration
    'c2pc'off
  • font-feature-settings: 'unic';

    Remplace minuscules et majuscules par un jeu de caractères unique. La taille des lettres sera celle des majuscules. Leur glyphe peut être soit celui de la minuscule, soit de la majuscule, suivant celui qui sera le plus adapté.
    Dans notre exemple, le T et le R ont le glyphe de la lettre majuscule tandis que les autres lettres ont le glyphe de la minuscule.

    Démonstration
    'cs2c'off
  • font-feature-settings: 'cpsp';

    Agrandit légèrement l'espace entre les majuscules successives. L'espace standard est prévu pour une écriture essentiellement en minuscules avec seulement une majuscule en début des phrases ou de certains mots. Lorsque tout le texte est en majuscules il est plus esthétique d'augmenter un peu cet espace entre les lettres.
    En cliquant sur les exemples ci-dessus, on voit que cette valeur n'a d'effet que sur les textes en majuscules.

    EXEMPLE
    'cpsp'off
    exemple
    'cpsp'off
  • font-feature-settings: 'opsz';

    Met en œuvre la modification des formes des glyphes en fonction de la taille des caractères. Les très gros caractères permettent des glyphes plus sophistiqués, qui rendraient la lecture difficile sur des caractères plus petit.
    Sur les gros caractères, il est courant par exemple d'augmenter la différence d'épaisseur entre les pleins et les déliés, ou d'augmenter la taille des empattements.

    Cette fonctionnalité peut être ajustée plus facilement par La propriété font-optical-sizing.

    EXEMPLE
    EXEMPLE
    'opsz'off
  • font-feature-settings: 'kern';

    Ajuste le crénage, c'est à dire l'espace entre les lettres successives lorsque leur forme nécessite un ajustement de cet espace. Dans le mot AVION en majuscules, les lettres A et V ont des formes qui peuvent facilement s'imbriquer pour un rendu plus harmonieux : on voit que, lorsque le crénage est désactivé, la lettre A semble séparée du reste du mot.
    Cette valeur est souvent activée par défaut.

    AVION
    'kern'off

Gestion des ligatures avec font-feature-settings.

Une ligature est un caractère unique qui remplace une suite de deux ou trois caractères distincts. On utilise les ligatures lorsque les glyphes de deux caractères s'enchaînent mal. Les deux exemples les plus connus sont orthographiques : ae et oe qui se ligaturent en æ et œ. Mais d'autres ligatures visent surtout à améliorer l'esthétique et/ou la lisibilité, comme les lettres f i qui se ligaturent en fi afin d'éviter la collision entre le point du i et la boucle du f.

ae→æ   fi→fi   sz→ß

Certaines polices de caractères utilisent des ligatures pour faciliter la saisie : par exemple la suite des trois caractères (C) est remplacée par le symbole ©, qui n'est pas disponible directement au clavier. De même la suite (P) sera remplacés par ℗.

(C)→©   (P)→℗

On voit que les possibilités offertes par les ligatures sont très dépendantes de la police utilisée. Rien n'est vraiment normalisé dans ce domaine.

La propriété standardisée équivalente pour gérer les ligatures est font-variant-ligatures.

  • font-feature-settings: 'liga';

    Mise en œuvre des ligatures courantes. Des suites de caractères sont remplacées par le glyphe unique de la ligature.
    Exemples : la suite des lettres f et i devient le caractère unique fi, O et E devient Œ A et E devient Æ, etc.
    Les ligatures courantes sont activées par défaut. Pour les désactiver utiliser la syntaxe
    font-feature-settings:'liga'off;

    Définition
    'liga'off
    le trèfle
    'liga'off
    affinité
    'liga'off
  • font-feature-settings: 'dlig';

    Mise en œuvre de ligatures supplémentaires (par rapport à 'liga') : d'autres successions de caractères peuvent être remplacées par un caractère unique.
    Cette valeur n'est pas activée par défaut. C'est à peu près la seule différence avec liga.

    Contact spécial est pris
    'dlig'off
    LOL lol WTF
    'dlig'off
  • font-feature-settings: 'calt';

    Autre possibilité de ligatures. Donne des résultats ou non, suivant la police.

    Arts et essais
    'calt'off
  • font-feature-settings: 'hlig';

    Mise en œuvre des ligatures historiques. Ces ligatures étaient employées par le passé. Elles ont maintenant un caractère rétro qui peut être occasionnellement utile.

    Finition
    'hlig'off
  • font-feature-settings: 'clig';

    Encore d'autres ligatures.

    Exemple
    'clig'off

Gestion de l'affichage des nombres avec font-feature-settings.

La propriété standardisée équivalente est font-variant-numeric.

  • font-feature-settings: 'lnum'; font-feature-settings: 'onum';

    lnum force un alignement horizontal des nombres : tous les chiffres ont la même base et la même hauteur. Cette valeur est généralement activée par défaut.

    onum n'aligne pas les chiffres et ceux-ci peuvent avoir des hauteurs différentes, ce qui provoque un effet "old style".

    Les valeurs lnum et onum sont bien sûr incompatibles. lnum est activé par défaut, sauf dans certaines polices fantaisies.

    1234567890
    'lnum'
    1234567890
    'onum'
  • font-feature-settings: 'tnum'; font-feature-settings: 'pnum';

    tnum force une largeur de caractère identiques pour tous les chiffres. Ce qui permet l'alignement vertical des nombres. Le t signifie tableau. Cette valeur est généralement celle qui est choisie par défaut.

    pnum force une largeur proportionnelle des chiffres. Cette fonctionnalité améliore l'esthétique mais empêche l'alignement vertical des nombres. Le p veut dire proportionnel.

    Ces deux valeurs sont bien sûr incompatibles. Elles sont toutes deux sans effet sur une police à espacements fixes.

    1 211 151,10
    8 245 300,24
    'tnum'
    1 211 151,10
    8 245 300,24
    'pnum'
  • font-feature-settings: 'frac';

    Les suites de deux nombres séparés par une barre oblique ( / ) sont affichés comme une fraction.

    1/2   3/4   1/100   36/1000
    'frac'off
  • font-feature-settings: 'ordn';

    Certaines suites de caractères sont remplacées par le glyphe correspondant au nombre ordinal. Par exemple No devient №, 1st devient 1st, etc. Malheureusement les numéros ordinaux français 1er, 2ème, etc. sont traités que par peu de polices.

    No no 1a 1st 2nd
    1er 2ème
    'ordn'off
  • font-feature-settings: 'zero';

    Le glyphe des zéros standards est remplacé par celui des zéros barrés. Le but étant d'éviter la confusion avec la lettre O majuscule.

      1 000  
    'zero'off

Indices et exposants avec font-feature-settings.

La propriété standardisée équivalente est font-variant-position.

  • font-feature-settings: 'subs';

    Écriture des chiffres en indice.
    Remarque : la balise HTML sub provoque également une mise en indice mais l'auteur doit positionner les balises manuellement autour des chiffres, tandis que l'option subs détecte automatiquement ce qui doit être placé en indice.

    H2O - CH4
    C12H22O11
    'subs'off
  • font-feature-settings: sups

    Écriture des chiffres en exposant. Même remarque : la balise HTML sup provoque également une mise en exposant mais l'auteur doit positionner les balises manuellement autour des chiffres.

    πR2 - m3
    'sups'off
  • font-feature-settings: 'dnom'; font-feature-settings: 'numr';

    Ces deux valeurs réduisent la taille des chiffres et les alignent par le bas pour dnom (dénominateur) et par le haut pour numr (numérateur) Le résultat ressemblera à celui de subs et sups sauf que les chiffres restent alignés sur les lettres, sans passer en indice ou en exposant.

    h2O 200€
    'dnom'off
    H2O 200€
    'numr'off
  • font-feature-settings: 'sinf';

    Remplace le glyphe des chiffres et des lettres minuscules par un glyphe plus petit et positionné plus bas. Cette notation est adaptée à l'écriture de formules chimiques ou scientifiques.

    h2O NaCl
    'sinf'off

Autres substitutions de caractères avec font-feature-settings.

La propriété standardisée équivalente est font-variant-alternates.

  • font-feature-settings: 'aalt';

    Cette valeur est surtout utile pour tester les substitutions possibles avec la police choisie. On peut explorer toutes les variantes en faisant évoluer le numéro après la valeur :
    font-feature-settings:'aalt'1; font-feature-settings:'aalt'2; font-feature-settings:'aalt'3; Etc.
    Dans notre exemple nous n'avons fait figurer que les lettres qui sont le plus remarquables, mais ce genre de test se fait sur l'alphabet complet

    s d e h l m r s t
    'aalt'2
    s d e h l m r s t
    'aalt'3
  • font-feature-settings: 'hist';

    Cette valeur remplace les formes habituelles des caractères par une forme ayant un aspect plus ancien (historique).

    A J Q s a b c d f
    'hist'off
  • font-feature-settings: 'cswh';

    Remplace les formes habituelles des caractères par une forme plus ornée, en tenant compte des lettres avant ou après (ou de l'absence de lettre).

    La feuille morte
    'cswh'off
  • font-feature-settings: 'swsh;

    Transforme les initiales des mots en caractères ornés.
    Remarque : certaines polices OTF comportent plusieurs glyphes ornés, on peut alors préciser le numéro du glyphe à utiliser. Exemple : font-feature-settings: 'swsh' 2.

    Un beau titre
    'swsh'off
  • font-feature-settings: 'titl';

    Remplace les glyphes habituels par des glyphes plus adaptés à l'écriture de titres. Il s'agit en général de lettres capitales avec des attributs adaptés aux grandes tailles.

      Titre  
    'titl'off
  • font-feature-settings: 'salt';

    Remplace certains glyphes par une variante plus stylistique. Remarque : dans certaines polices il existe plusieurs variantes stylistiques : préciser le numéro de la variante à utiliser.
    Exemple : font-feature-settings: 'salt' 2;.

    Démonstration
    'salt'off
  • font-feature-settings: 'ss01';

    Variante stylistique.

    EXEMPLE
    'ss01'off
  • font-feature-settings: 'ornm';

    Remplace les formes habituelles de certains caractères minuscules par un pictogramme, un fleuron, une frise, etc. La caractère puce • ( • ) a également un pictogramme qui lui correspond.

    abcdefghijklm
    nopqrstuvwxyz
    'ornm'off
  • font-feature-settings: 'locl';

    Remplace les glyphes standards de certains caractères par le glyphe spécifique à un pays ou une langue.

      à ö ç  
    'locl'off

Gestion des alphabets spéciaux avec font-feature-settings.

La propriété standardisée équivalente est font-variant-east-asian.

  • font-feature-settings: 'palt'; font-feature-settings: 'pkna'; font-feature-settings: 'pwid'; font-feature-settings: 'fwid'; font-feature-settings: 'hwid'; font-feature-settings: 'halt'; font-feature-settings: 'twid'; font-feature-settings: 'qwid'; font-feature-settings: 'jp78'; font-feature-settings: 'jp83'; font-feature-settings: 'jp90'; font-feature-settings: 'jp04'; font-feature-settings: 'trad'; font-feature-settings: 'ruby'; font-feature-settings: 'hkna'; font-feature-settings: 'nlck'; font-feature-settings: 'nalt'; font-feature-settings: 'ccmp';

    Si vous souhaitez une description plus précise de chacune de ces valeurs, vous pouvez vous reporter, entre autres, à la page sur le site de la société Adobe : Syntaxe des fonctionnalités OpenType en CSS.

Gestion de l'écriture verticale avec font-feature-settings.

Les valeurs suivantes pour font-feature-settings ne sont prise en compte que lorsque le sens d'écriture est vertical. Le sens d'écriture se définit avec la propriété writing-mode.

  • font-feature-settings: 'vkrn';

    Ajuste le crénage vertical.

  • font-feature-settings: 'vert';

    Remplace certains glyphes par d'autres, plus adaptés à l'écriture verticale.

  • font-feature-settings: 'vpal'; font-feature-settings: 'vhal';

    Ces deux valeurs réajustent, avec des logiques différentes, l'espacement des caractères dans le cas d'une écriture verticale.

  • font-feature-settings: 'vkna';

    Remplace les caractères kana standards par des glyphes plus adaptés à l'écriture verticale.

Autres effets stylistiques avec font-feature-settings.

  • font-feature-settings: 'ital'; font-feature-settings: 'slnt';

    Remplace les caractères par leur glyphe en italique (ital) ou en oblique (slnt).

    abcdefg
    'ital'off
    abcdefg
    'slnt'off

La propriété font-feature-settings et Javascript.

Il y a une difficulté particulière pour modifier la valeur de la propriété font-feature-settings par programme : ne pas créer de confusion entre les apostrophes du langage (JS ou JQuery) et ceux nécessités par la syntaxe CSS. Néanmoins cette difficulté se résout facilement puisque, aussi bien CSS que Javascript ou JQuery, acceptent indifféremment les guillemets et les apostrophes (il y a aussi la possibilité d'échapper les apostrophes de CSS avec le caractère antislash (\)).

Le mot on, prévu dans la syntaxe CSS, est facultatif, il peut être précisé ou non.

Modifier la valeur de font-feature-settings en Javascript.

En Javascript, le nom de la propriété peut être écrit en kebab-case (un tiret pour séparer les mots), ou en camel-case (une majuscule pour séparer les mots).

Javascript
let el = document.getElementById('id'); el.style['font-feature-settings'] = "'c2sc'"; // ou let el = document.getElementById('id'); el.style.fontFeatureSettings = "'c2sc'";

Lire en Javascript la valeur de font-feature-settings.

Cet exemple de code retrouve la valeur de font-feature-settings à condition que celle-ci ait été affectée via l'attribut style de l'élément, autrement dit dans le code HTML. Pour retrouver la valeur affectée via un sélecteur CSS, reportez au code d'après (la valeur calculée).

Javascript
let el = document.getElementById('id'); let value = el.style['font-feature-settings']; // ou let el = document.getElementById('id'); let value = el.style.fontFeatureSettings;

Lire la valeur calculée de font-feature-settings en Javascript.

La valeur calculée est évaluée par le navigateur en fonction de la cascade des héritages. Si aucune valeur n'est affectée ni à l'élément ni à ses parents, la valeur calculée est normal, qui est la valeur initiale de la propriété font-feature-settings.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('font-feature-settings');

Modifier la valeur de la propriété font-feature-settings avec JQuery.

Comme en Javascript, le nom de la propriété peut être inscrit en kebab-case ou en camel-case.

JQuery

$('#id').css('font-feature-settings', "'c2sc'");
// ou
$('#id').css('fontFeatureSettings', "'c2sc'");

Lire la valeur calculée de la propriété font-feature-settings avec JQuery.

JQuery
let value = $('#id').css('font-feature-settings');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété font-feature-settings et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Le bouton valeur calculée permet de voir comment est mémorisée (sérialisée). Il faut que noter que, avec font-feature-settings), même les valeurs incorrectes (qui ne correspondent pas à un code) sont mémorisées.

Support de font-feature-settings.

La propriété font-feature-settings en elle même est relativement bien reconnue par les navigateurs. Mais il faut garder à l'esprit que la multitude de possibilités auxquelles elle donne accès seront disponibles ou pas en fonction de la police de caractères choisie.

La tableau donne également la compatibilité avec les descripteur font-feature-settings.

Colonne 1
Prise en charge par les navigateurs de la propriété font-feature-settings qui permet d'activer n'importe quelle fonctionnalité des polices de caractères.
Colonne 2
Support de descripteur font-feature-settings utilisé avec la directive @font-face.
1
Propriété
font-feature-settings
2
Descripteur
font-feature-settings
Estimation de la prise en charge globale.
97%
19%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Évolution de la propriété font-feature-settings.

Voir aussi, à propos des polices de caractères.

De nombreuse propriétés (ou autres définitions) concernent les polices de caractères. Elles sont regroupés dans le module CSS Fonts Module. En voici la liste pour faciliter vos recherches.

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
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-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit 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-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.