Propriété CSS font-variant-ligatures

La propriété CSS font-variant-ligatures contrôle les ligatures et les formes contextuelles qu'une police utilise. Une ligature est un glyphe unique qu'une police de caractères substitue à deux caractères ou plus qui, placés côte à côte, se chevaucheraient ou rendraient mal — l'exemple classique est la paire fi, où le point du i entre en collision avec la boucle du f.

Les ligatures sont une fonctionnalité OpenType intégrée dans le fichier de police. Cette propriété vous permet simplement d'activer ou de désactiver celles disponibles ; si la police ne contient pas une ligature particulière, la propriété n'a aucun effet visible. De ce fait, font-variant-ligatures modifie uniquement l'apparence, jamais le texte sous-jacent — la copie, la recherche et les lecteurs d'écran voient toujours les caractères d'origine.

font-variant-ligatures accepte un mot-clé de chacun des groupes suivants (combinés dans n'importe quel ordre) :

normal — laisser la police décider (la valeur par défaut).
none — désactiver toutes les ligatures et formes contextuelles.
<common-lig-values> — common-ligatures / no-common-ligatures
<discretionary-lig-values> — discretionary-ligatures / no-discretionary-ligatures
<historical-lig-values> — historical-ligatures / no-historical-ligatures
<contextual-alt-values> — contextual / no-contextual

Valeur initiale	normal
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.fontVariantLigatures = "normal";

Syntaxe

font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

Vous pouvez lister un mot-clé de plusieurs groupes ensemble. Par exemple, ceci conserve les ligatures courantes, active les ligatures décoratives et désactive la jointure contextuelle :

font-variant-ligatures: common-ligatures discretionary-ligatures no-contextual;

Exemple de la propriété font-variant-ligatures

Les deux spans ci-dessous affichent les mêmes caractères avec la même police. Le premier désactive les ligatures courantes, de sorte que f et i apparaissent comme deux glyphes séparés ; le second les active, de sorte que la paire fusionne en un seul glyphe fi.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div {
        font-family: Lora, serif;
        font-size: 35vw;
      }
      .gray {
        font-variant-ligatures: no-common-ligatures;
        color: #ccc;
      }
      .blue {
        font-variant-ligatures: common-ligatures;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-ligatures property example</h2>
    <div>
      <span class="gray">fi</span>
      <span class="blue">fi</span>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS font-variant-ligatures](/uploads/media/default/0001/03/fc947bebf8b5cb8a0a41ea56ea12d1fd303a936c.png "fi rendu avec et sans ligatures courantes" width="420" height="200")

Types de ligatures

CSS reconnaît quatre familles de ligatures et de formes contextuelles, toutes alignées sur le format OpenType largement utilisé. Chaque famille possède sa propre paire de mots-clés, vous pouvez donc les activer ou les désactiver indépendamment.

Ligatures courantes

Les ligatures courantes se déclenchent lorsque deux caractères se «heurteraient» — la paire minuscule f + i en est l'exemple typique. Les joindre rend le texte plus confortable à lire, c'est pourquoi la plupart des polices et des navigateurs activent les ligatures courantes par défaut. Activez-les ou désactivez-les explicitement avec :

/* Enable common ligatures (the default) */
font-variant-ligatures: common-ligatures;

/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;

Ligatures discrétionnaires

Les ligatures discrétionnaires (aussi appelées ligatures décoratives) existent pour l'ornement visuel plutôt que pour la lisibilité — pensez à une jointure ct ou st ornée dans une police d'affichage. Elles sont désactivées par défaut, vous les activez uniquement là où vous souhaitez la décoration :

/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;

/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;

Ligatures historiques

Les ligatures historiques reproduisent des formes autrefois courantes dans les anciens livres et manuscrits, telles que les combinaisons du s long (ſ). Comme les ligatures discrétionnaires, elles sont décoratives et désactivées par défaut :

/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;

/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;

Variantes contextuelles

Les variantes contextuelles améliorent la lisibilité en choisissant un glyphe qui se raccorde harmonieusement à ses voisins. Elles sont particulièrement visibles dans les écritures connectées (polices cursives, arabe), où les traits doivent s'enchaîner continuellement d'un caractère au suivant. Activez-les ou désactivez-les avec :

/* Enable contextual alternates */
font-variant-ligatures: contextual;

/* Disable contextual alternates */
font-variant-ligatures: no-contextual;

Valeurs

Valeur	Description
normal	L'activation des formes et des ligatures dépend de la police, de la langue et du type d'écriture. Il s'agit de la valeur par défaut de cette propriété.
none	Toutes les ligatures et formes contextuelles sont désactivées.
`<common-lig-values>`	Contrôle toutes les ligatures.
`<discretionary-lig-values>`	Contrôle des ligatures spécifiques.
`<historical-lig-values>`	Contrôle les ligatures utilisées dans les anciens livres.
`<contextual-alt-values>`	Contrôle l'adaptation des lettres à leur contexte (`contextual` / `no-contextual`).
initial	Définit la propriété à sa valeur par défaut (`normal`).
inherit	Hérite la propriété de l'élément parent.

Quand l'utiliser

La plupart du temps, normal est le bon choix — le concepteur de la police a déjà défini des valeurs par défaut sensées. Utilisez des valeurs explicites lorsque :

Un titre d'affichage ou de logo nécessite des discretionary-ligatures décoratives qu'il n'aurait pas autrement.
Un bloc monospace / code affiche des ligatures que vous ne souhaitez pas (certains éditeurs transforment != en un seul glyphe) ; none ou no-common-ligatures restaure les caractères littéraux.
Vous définissez text-rendering: optimizeSpeed ou animez du texte, et la substitution de ligatures provoque un scintillement — la désactiver peut stabiliser le rendu.

Propriétés associées

font-variant — la propriété raccourcie qui regroupe les ligatures avec les majuscules, les numériques et d'autres fonctionnalités de variante.
font-feature-settings — accès de bas niveau aux mêmes fonctionnalités OpenType via leurs balises à quatre lettres (liga, dlig, hlig, calt).
font-kerning — contrôle l'espacement entre les paires de glyphes, la fonctionnalité le plus souvent confondue avec les ligatures.
css-font-variant-caps-property et css-font-variant-numeric-property — propriétés longues font-variant-* sœurs.

Pratique

Que contrôle la propriété CSS 'font-variant-ligatures' ?

Elle contrôle l'espacement entre les caractèresElle contrôle la mise en majuscules du texteElle contrôle l'affichage des ligatures dans le texteElle contrôle les paramètres de retour à la ligneElle contrôle la police de caractères du texte