font-variant-ligatures
La propriété 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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
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: 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 OpenTypeliga
andclig
. Deux valeurs sont possibles:common-ligatures
active ces ligatures. Notez que la valeurnormal
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 valeurnormal
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 valeurnormal
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 valeurnormal
active ces ligatures.no-contextual
interdit leur utilisation.
Syntaxe formelle
normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]où
<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
CSS
p {
font-size: 2rem;
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;
}
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>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Fonts Module Level 3 La définition de 'font-variant-ligatures' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | normal |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser