CSS font-variant-ligatures Property

Description

The font-variant-ligatures property specifies ligatures and contextual forms which are ways of combining glyphs to produce more harmonized forms.

Initial value

normal

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.fontVariantLigatures

Syntax

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

Values

• normalA value of 'normal' specifies that common default features are enabled. For OpenType fonts, common ligatures and contextual forms are on by default, discretionary and historical ligatures are not.
• noneSpecifies that all types of ligatures and contextual forms covered by this property are explicitly disabled. In situations where ligatures are not considered necessary, this may improve the speed of text rendering.
• <common-lig-values> = [ common-ligatures | no-common-ligatures ]common-ligatures - Enables display of common ligatures (OpenType features: liga, clig). For OpenType fonts, common ligatures are enabled by default.
  no-common-ligatures - Disables display of common ligatures (OpenType features: liga, clig).
• <discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]discretionary-ligatures - Enables display of discretionary ligatures (OpenType feature: dlig). Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.
  no-discretionary-ligatures - Disables display of discretionary ligatures (OpenType feature: dlig).
• <historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]historical-ligatures - Enables display of historical ligatures (OpenType feature: hlig).
  no-historical-ligatures - Disables display of historical ligatures (OpenType feature: hlig).
• <contextual-alt-values> = [ contextual | no-contextual ]contextual - Enables display of contextual alternates (OpenType feature: calt). Although not strictly a ligature feature, like ligatures this feature is commonly used to harmonize the shapes of glyphs with the surrounding context. For OpenType fonts, this feature is on by default.
  no-contextual - Disables display of contextual alternates (OpenType feature: calt).

Example

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

Browser Support

Desktop
X	X	34	34	21	9.1
Tablets / Mobile
37	34	34	21	9.3	Yes