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
Explorer Edge Chrome Firefox Opera Safari
XX3434219.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
373434219.3Yes