Propriété CSS font-variant-ligatures
La propriété font-variant-ligatures contrôle les ligatures et les formes contextuelles qui produisent des formes plus harmonisées.
Cette propriété est spécifiée par les valeurs suivantes :
- normal
- none
<common-lig-values><discretionary-lig-values><historical-lig-values><contextual-alt-values>
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontVariantLigatures = "normal"; |
Syntaxe
Syntaxe de la propriété CSS font-variant-ligatures
font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;Exemple de la propriété font-variant-ligatures :
Exemple de la propriété CSS font-variant-ligatures avec les valeurs no-common-ligatures et common-ligatures
<!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>Résultat
Types de ligatures
Il existe plusieurs types de ligatures reconnus par le CSS. Ces ligatures sont alignées sur le format OpenType largement utilisé. Nous allons les passer en revue une par une.
Ligatures courantes
Ces ligatures sont principalement utilisées lorsque les caractères se "heurtent". Cela rend le texte plus difficile et inconfortable à lire. Par exemple, prenons la combinaison des lettres minuscules "i" et "f". Activer les ligatures joint ces deux lettres, ce qui facilite la lecture. Le CSS active les ligatures courantes par défaut. Mais vous pouvez les activer ou les désactiver manuellement comme suit :
CSS font-variant-ligatures Property
/* Enable common ligatures */
font-variant-ligatures: common-ligatures;
/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;Ligatures discrétionnaires
Les ligatures discrétionnaires, également appelées ligatures décoratives, sont davantage utilisées à des fins ornementales. En fait, elles ne sont pas conçues pour la lecture. Ces ligatures sont désactivées par défaut dans le CSS et sont en option. Cela signifie que vous pouvez les activer lorsque vous le souhaitez. L'activation ou la désactivation des ligatures discrétionnaires se fait comme suit :
CSS font-variant-ligatures Property
/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;
/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;Ligatures historiques
Les ligatures historiques sont également conçues à des fins décoratives. Vous pouvez les activer ou les désactiver à l'aide du code ci-dessous :
CSS font-variant-ligatures Property
/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;
/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;Alternatives contextuelles
Les alternatives contextuelles sont utiles pour améliorer la lisibilité. Elles offrent un meilleur comportement de jointure des caractères composant la ligature. Les alternatives contextuelles sont particulièrement utiles dans le cas des écritures liées. Grâce à elles, les traits se connectent correctement d'un caractère à l'autre, en maintenant un flux continu.
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. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que contrôle la propriété CSS 'font-variant-ligatures' ?