CSS font-variant-ligatures Property

The font-variant-ligatures property controls the ligatures and contextual forms which are to 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

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

Example

<!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>

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.




Related articles