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 - Propriété font-feature-settings

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

Cette propriété n'est pas standardisée par le W3C. De plus sa syntaxe (une énumération d'options) perturbe le mécanisme d'héritage. Nous vous conseillons d'utiliser plutôt la propriété font-variant et ses dérivées.

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 (Open Type Font) : 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.

font-feature-settings accepte une ou plusieurs valeurs parmi celles qui sont énumérées ci-dessous, séparées par des virgules. Les 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. Certaines valeurs sont suivies d'un nombre ou bien de on ou off.

Les possibilités de font-feature-settings sont fortement liées à la police utilisée. Si certaines valeurs comme tnum ou smcp donnent des résultats à peu é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.

Syntaxe de font-feature-settings.

Il est fréquent de définir plusieurs valeurs, 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: 'smcp', 'c2sc'; font-feature-settings: 'tnum'off, 'pnum'on; font-feature-settings: 'ornm'2;

Cette notation "cumulative" pose des problèmes lors de l'héritage. En effet, pour ajouter une option à celles qui sont héritées, il faut lister à nouveau toutes les options héritées, ce qui suppose de les connaître.

body { font-feature-settings: 'smcp'; } div { font-feature-settings: 'c2sc'; /* Efface l'option héritée 'smcp' */ } div { font-feature-settings: 'smcp','c2sc'; /* Ce qu'il aurait fallu écrire */ }

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

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.

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: 'c2pc';

    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.
    Exemple : la suite des lettres f et i.
    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:

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

    • abcdefghijklmnopqrstuvwxyz
    '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';

    Remplace les caractères par leur glyphe en italique.

    abcdefg
    'ital'off
  • font-feature-settings: 'init'; font-feature-settings: 'medi'; font-feature-settings: 'isol'; font-feature-settings: 'fina'; font-feature-settings: 'ss02'; font-feature-settings: 'mark'; font-feature-settings: 'mkmk';

    Autres effets typographiques.

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 sont disponibles ou pas en fonction de la police de caractères choisie.

Afficher les versions antérieures   Afficher la version à venir  

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-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.
  • @font-feature-values : Définit les variantes typographiques à utiliser.