Font-variant-ligatures - Propriété CSS

font-variant-ligatures

Résumé des caractéristiques de la propriété font-variant-ligatures

Description rapide
Active ou désactive la ligature des caractères.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
normal | none | common-ligatures | no-common-ligatures | historical-ligatures | no-historical-ligatures | discretionary-ligatures | no-discretionary-ligatures | contextual | no-contextual
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-variant-ligatures 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)

Schéma syntaxique de font-variant-ligatures.

Font-variant-ligatures property - Syntax diagramSyntax diagram of the font-variant-ligatures CSS property. See stylescss.free.fr for details. normal normal none none common-ligatures common-ligatures no-common-ligatures no-common-ligatures discretionary-ligatures discretionary-ligatures no-discretionary-ligatures no-discretionary-ligatures historical-ligatures historical-ligatures no-historical-ligatures no-historical-ligatures contextual contextual no-contextual no-contextualfont-variant-ligatures:;font-variant-ligatures:;
Schéma syntaxique de la propriété font-variant-ligatures
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

Description de la propriété font-variant-ligatures.

font-variant-ligatures permet d'activer ou désactiver la ligature des caractères, c'est à dire le fait que certaines lettres, lorsqu'elles se suivent peuvent être reliées entre elles, ou même former un nouvelle lettre. Voici les ligatures les plus courantes :

Exemples de ligatures

Les principaux caractères liés existent dans le jeu Unicode, mais ils ne sont pas disponibles directement au clavier : il faut connaître leur code (ou l'entité HTML pour les utiliser). Les polices OTF offre la possibilité de remplacer automatiquement certaines paires de lettres par le caractère lié correspondant. C'est évidemment beaucoup plus simple pour les auteurs, qui peuvent taper leur texte, sans entrer dans le codage informatique.

font-variant-ligatures est la propriété la plus simple à utiliser, mais vous pouvez aussi vous renseigner sur la propriété résumée font-variant qui permet d'activer ou désactiver plusieurs options des polices OTF en une seule écriture.
Quant à font-feature-settings, c'est une propriété beaucoup plus complexe à utiliser, mais qui permet une gestion bas niveau de toutes les possibilités des polices OTF.

Quelques précisions sur les ligatures.

Une ligature consiste donc à remplacer une paire de lettres par un autre caractère, plus esthétique ou plus lisible. Le jeu de caractères Unicode comporte de nombreuses lettres ligaturées comme œ, æ, fi, etc. mais pour que le remplacement puisse être automatique (ce que prétend faire font-variant-ligatures, il faut en plus que la police comporte une table de substitution, afin que le navigateurs sache par quoi remplacer les paires de lettres.

Bien entendu l'auteur de la page a toujours la possibilité d'utiliser Les entités afin d'imposer les caractères de son choix mais les navigateurs peuvent à présent prendre ce travail à leur charge.

Les ligatures sont des subtilités typographiques : on pourrait tout simplement les ignorer. Mais les tablettes de lecture, les livres numériques sont de plus en plus nombreux : Kindle de Amazon, Kobo, Pocket Book, etc. Il serait dommage que ces livres numériques fassent moins bien que leurs prédécesseurs, les livres papier.

Plusieurs types de ligatures :

Les ligatures orthographiques.

Ne pas utiliser ces ligatures est considéré comme une faute d'orthographe. Les correcteurs signalent d'ailleurs ces oublis. En français, ce sont essentiellement les deux caractères œ et æ, qui existent aussi en majuscules Œ et Æ. Les autres langues comportent aussi leurs ligatures orthographiques comme ß en allemand.

Les ligatures esthétiques.

Certaines lettres, lorsqu'elles se suivent, ont des formes qui se chevauchent ou qui rendent un résultat peu esthétique pour les puristes. C'est surtout le cas avec les polices à empattements comme 'Times new Roman'. Par exemple, le f suivi d'un i fait que le point du i vient percuter la boucle du f. On pourra avantageusement remplacer ces deux lettres par le caractère fi.

Une autre ligature est très couramment utilisée, celle qui consiste à remplacer les lettres e et t par &.

fi => fi     et => &

Les ligatures optionnelles.

Certains créateurs de polices de caractères ne se privent pas de dessiner non seulement toutes les lettres individuelles mais également des caractères de remplacement pour de nombreuses paires de caractères. L'auteur peut activer ces ligatures complémentaires mais le résultat sera fortement lié à la police utilisée.

ct => Ligature ct     st => Ligature st

Les ligatures historiques.

Elles sont un peu tombées dans l'oubli mais il peut être intéressant de les ressortir pour créer un effet de typographie à l'ancienne. Malheureusement, très peu de polices comportent ces caractères.

Pour en savoir plus sur les ligatures.

Si vous souhaitez approfondir cette notion de ligature, nous vous recommandons cette page, très précise et détaillée : Les ligatures dans les navigateurs.

Syntaxes pour font-variant-ligatures.

La police de caractères utilisée pour les exemples et le simulateur est la police Kleymissky (copyright gluk).

  • font-variant-ligatures: normal;

    Valeur par défaut. Les caractères sont restitués tels qu'ils dont définis par défaut dans la police. Certaines ligatures sont utilisées, d'autres non. En général cette valeur est équivalente à common-ligatures et contextual.

    L fi ff
  • font-variant-ligatures: none;

    Aucune ligature n'est utilisée.

    L fi ff
  • font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures;

    Activation ou désactivation des ligatures les plus communes : par exemple fi => fi

    Correspond aux styles OTF liga et clig. Reportez-vous à la propriété font-feature-settings pour une description plus complète des possibilités des polices Open Type.

    L fi ff
    common-ligatures
    L fi ff
    no-common-ligatures
  • font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures;

    Activation ou désactivation des ligatures spécifiques à la police utilisée.

    Correspond au style OTF dlig.

    L fi ff
    discretionary-ligatures
    L fi ff
    no-discretionary-ligatures
  • font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures;

    Activation ou désactivation des ligatures telles qu'elles étaient utilisées en imprimerie mécanique, comme par exemple fz => β.

    Correspond au style OTF hlig.

    L fi ff
    historical-ligatures
    L fi ff
    no-historical-ligatures
  • font-variant-ligatures: contextual; font-variant-ligatures: no-contextual;

    Activation ou désactivation des ligatures contextuelles.

    Correspond au style OTF calt.

    L fi ff
    contextual
    L fi ff
    no-contextual

Valeurs standards acceptées par toutes les propriétés:

font-variant-ligatures: initial (normal) font-variant-ligatures: inherit font-variant-ligatures: revert font-variant-ligatures: revertLayer font-variant-ligatures: unset

Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation de la propriété font-variant-ligatures.

Les trois animations ci-dessous font bien ressortir les différences de comportement de chacune des polices de caractères. Et donc en conséquence, la difficulté de gérer les ligatures autrement que de façon spécifique à la police utilisée.

  • Kleymissky ajoute bien une ligature entre le f et le i, mais ajoute également des boucles sur les premières et dernières lettres de chaque mot. Ce qui ne devrait pas être inclus dans les ligatures.
  • Warnock applique également les ligatures sur les paires de lettres st et ct. Ce que les autres polices ne font pas.
  • Quant à Comic Jens il s'agit d'une police de caractères humoristique avec des ligatures tout à fait spécifiques : on voit les trois lettres LOL en majuscules ou en minuscules, devenir un nouveau symbole.
Test tact
fin effet

Kleymissky
Test tact
fin effet
Warnock
Test tact
LOL lol

Comic Jens

Simulateur avec la propriété font-variant-ligatures.

L'effet de la propriété font-variant-ligatures est très dépendant de la police utilisée. Observez surtout les paires de caractères fi et ff, qui sont le plus souvent traitées.

Police :
font-variant-ligatures :
La ligature est en effet une finition esthétique subtile
if   ij   IJ   fi   ff   tf   ft   jf   fj   sz   ct   st

Prise en charge par les navigateurs (compatibilité).

La propriété font-variant-ligatures est bien reconnue par les navigateurs actuels, mais il faut garder à l'esprit que son effet est très dépendant de la police utilisée.

1
Propriété
font-variant-ligatures
Estimation de la prise en charge globale.
95%

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

Historique de la propriété font-variant-ligatures.

Voir aussi, au sujet des polices de caractères.

La spécification CSS Fonts Module regroupe tout ce qui concerne les polices de caractères : typographie, exploitation des possibilités des formats de polices modernes, téléchargement de polices, etc.

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