font-feature-settings - Propriété CSS
Résumé des caractéristiques de la propriété font-feature-settings
normal
normal
font-feature-settings
passe d'une valeur à l'autre sans transition.Description de la propriété font-feature-settings
.
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
.
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.
Fira Sans
: Designer : Carrois Apostrophe. Disponible sur Google Fonts.Kleymissky
: Designer : Gluk. Licence : SIL Open Font License.Comic Jens
: Designer : Jens Kutilek. Police distribuée sous licence Creative Common.Countryside
: Designer : Billy Argel. Licence : usage personnel uniquement.
Syntaxe de 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.
font-feature-settings:
;
Accès rapide aux valeurs pour font-feature-settings
.
- Capitalisation.
- Ligatures.
- Affichage des nombres.
- Indices et exposants.
- Substitution de caractères.
- Écriture verticale.
- Autres effets stylistiques.
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, leT
et leR
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'offexemple'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 lettresA
etV
ont des formes qui peuvent facilement s'imbriquer pour un rendu plus harmonieux : on voit que, lorsque le crénage est désactivé, la lettreA
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 lettresf
eti
devient le caractère uniquefi
,O
etE
devientŒ
A
etE
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'offle trèfle'liga'offaffinité'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 avecliga
.Contact spécial est pris'dlig'offLOL 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 valeurslnum
etonum
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. Let
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. Lep
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çais1er
,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'optionsubs
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 pournumr
(numérateur) Le résultat ressemblera à celui desubs
etsups
sauf que les chiffres restent alignés sur les lettres, sans passer en indice ou en exposant.h2O 200€'dnom'offH2O 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 complets d e h l m r s t'aalt'2s 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'offabcdefg'slnt'off
Manipulation de la propriété font-feature-settings
par programme.
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. Nous avons cependant opter dans les exemples de code qui suivent, 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).
function setFontFeatureSettings(el) {
el.style['font-feature-settings']='\'c2sc\'';
// ou
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).
function getFontFeatureSettings(el) {
alert(el.style['font-feature-settings']);
// ou
alert(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
.
function getCalcFontFeatureSettings(el) {
alert(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
.
function setFontFeatureSettings(el) {
$(el).css('font-feature-settings','\'unic\'on');
// ou
$(el).css('fontFeatureSettings','\'unic\'on');
}
Lire la valeur calculée de la propriété font-feature-settings
avec JQuery.
function getCalcFontFeatureSettings(el) {
alert($(el).css('font-feature-settings'));
// ou
alert($(el).css('fontFeatureSettings'));
}
Prise en charge par les navigateurs (compatibilité).
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.
font-feature-settings
pour appliquer des caractéristiques typographiques avancées et spécifiques
à la langue et/ou aux polices OpenType.
font-feature-settings
dans une directive @font-face
.
font-feature-settings
font-feature-settings
/
@font-face
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que font-feature-settings
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-feature-settings
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.