font-variant-ligatures

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La propriété CSS font-variant-ligatures contrôle quelles ligatures et formes contextuelles sont utilisées dans les éléments textuels auxquels elle s'applique. Ceci vise à harmoniser l'affichage du texte.

Exemple interactif

Syntaxe

css
/* Valeur avec un mot-clé */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */
font-variant-ligatures: contextual; /* <no-historical-ligatures> <common-ligatures> */

/* Valeurs globales */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

La valeur de cette propriété peut être l'un des mots-clés définis ci-après.

Valeurs

normal

Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut.

none

Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées.

<common-lig-values>

Ces valeurs contrôlent les ligatures les plus courantes, comme fi, ffi, th et autres. Elles correspondent aux valeurs OpenType liga et clig. Deux valeurs sont possibles :

  • common-ligatures : active ces ligatures. Notez que la valeur normal active ces ligatures.
  • no-common-ligatures : désactive ces ligatures.
<discretionary-lig-values>

Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType dlig. Deux valeurs sont possibles :

  • discretionary-ligatures : active ces ligatures.
  • no-discretionary-ligatures : désactive ces ligatures. Notez que la valeur normal désactive ces ligatures.
<historical-lig-values>

Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ꜩ. Elles correspondent à la valeur OpenType hlig. Deux valeurs sont possibles :

  • historical-ligatures : active ces ligatures.
  • no-historical-ligatures : désactive ces ligatures. Notez que la valeur normal désactive ces ligatures.
<contextual-alt-values>

Ces valeurs contrôlent la manière dont les lettres s'adaptent à leur contexte, c'est-à-dire aux lettres qui les entourent. Elles correspondent à la valeur OpenType calt. Deux valeurs sont possibles :

  • contextual : précise que des alternatives contextuelles peuvent être utilisées. Notez que la valeur normal active ces ligatures.
  • no-contextual : interdit leur utilisation.

Définition formelle

Valeur initialenormal
Applicabilitéall elements and text. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

font-variant-ligatures = 
normal |
none |
[ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

<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

Exemples

Paramétrer les ligatures et formes contextuelles

HTML

html
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>

CSS

css
p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

.contextual {
  font-variant-ligatures: contextual;
}

Résultat

must be provided

Spécifications

Specification
CSS Fonts Module Level 4
# font-variant-ligatures-prop

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant-ligatures
common-ligatures
contextual
discretionary-ligatures
historical-ligatures
no-common-ligatures
no-contextual
no-discretionary-ligatures
no-historical-ligatures
none
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi