font-variant-ligatures
CSS font-variant-ligatures Property
The font-variant-ligatures property controls the ligatures and contextual forms that produce more harmonized forms.
This property is specified by the following values:
normal
none
<common-lig-values>
<discretionary-lig-values>
<historical-lig-values>
<contextual-alt-values>
| 类目 | 类目 |
|---|---|
| Initial Value | normal |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.fontVariantLigatures = “normal”; |
Syntax
Syntax
font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;
Example of the font-variant-ligatures property:
<!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>
Result
Types of ligatures
Types of ligatures
There are multiple types of ligatures recognized by the CSS. These ligatures are aligned with the widely used OpenType format. We are going to go through each one.
Common ligatures
These ligatures are mostly used when the characters “hit” each other. This makes the text harder and uncomfortable to read. As an example, we can take the combination of the lowercase “i” and “f” letters. Enabling the ligatures will join these two letters together making them easier for reading. The CSS enables common ligatures, by default. But you can manually enable or disable them like this:
/* Enable common ligatures */
font-variant-ligatures: common-ligatures;
/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;
Discretionary ligatures
Discretionary ligatures, also called decorative ligatures, are more used as decoration. In fact, they are not designed for reading them. These ligatures are disabled by CSS, by default, and are extra optional. This means that you can enable them when you want. Enabling or disabling the discretionary ligatures is done like this:
/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;
/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;
Historical ligatures
Historical ligatures are designed for decoration purposes, too. You can enable or disable them using the code below:
/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;
/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;
Contextual alternates
Contextual alternates
Contextual alternates are useful for improving the legibility. They provide better joining behaviour the characters making up the ligature. The contextual alternates are especially useful in the case of connected scripts.Due to them, the strokes connect correctly from one character to another, keeping a continuous flow.
Values
Values
| Value | Description |
|---|---|
| normal | Activation of forms and ligatures depends on the font, language and the kind of script. This is the default value of this property. |
| none | All the ligatures and contextual forms are disabled. |
| <common-lig-values> | Controls all the ligatures. |
| <discretionary-lig-values> | Controls specific ligatures. |
| <historical-lig-values> | Controls ligatures that are used in old books. |
| <contextual-alt-values> | Controls the adaptation of the letters to their context. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |