The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.
/* Keyword values */ 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> */ /* Global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: unset;
| Initial value | normal |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
The font-variant-ligatures property is specified as one of the keyword values listed below.
Values
normal- This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.
none- This keyword specifies that all ligatures and contextual forms are disabled, even common ones.
- <common-lig-values>
- These values control the most common ligatures, like for
fi,ffi,thor similar. They correspond to the OpenType valuesligaandclig. Two values are possible:common-ligaturesactivating these ligatures. Note that the keywordnormalactivates these ligatures.no-common-ligaturesdeactivating these ligatures.
- <discretionary-lig-values>
- These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values
dlig. Two values are possible:discretionary-ligaturesactivating these ligatures.no-discretionary-ligaturesdeactivating the ligatures. Note that the keywordnormalusually deactivates these ligatures.
- <historical-lig-values>
- These values control the ligatures used historically, in old books, like the German tz digraph being displayed ß. They correspond to the OpenType values
hlig. Two values are possible:historical-ligaturesactivating these ligatures.no-historical-ligaturesdeactivating the ligatures. Note that the keywordnormalusually deactivates these ligatures.
- <contextual-alt-values>
- These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values
calt. Two values are possible:contextualspecifies that the contextual alternates are to be used. Note that the keywordnormalusually activates these ligatures too.no-contextualprevents their use.
Formal syntax
normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]where
<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 ]
Examples
p {
font-variant-ligatures: none;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Fonts Module Level 3 The definition of 'font-variant-ligatures' in that specification. |
Candidate Recommendation | Initial definition |
Browser Compatibility
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 34 31 -webkit- | No | 34 24 — 341 | No | 21 19 -webkit- | 9.1 7 -webkit- |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic support | 34 4.4 -webkit- | 34 | No | 34 24 — 341 | ? | 21 | Yes 7 -webkit- |
1. From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.