CSS font-variant-ligatures Property

❮ Previous Reference Next ❯

Example

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 32px;
  font-variant-ligatures: historical-ligatures;
}
Try this code ❯





Hello World!


Meaning:

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.

Default value:normal
Inherited:Yes
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.fontVariantLigatures="none|normal|common-lig-values|discretionary-lig-values|historical-lig-values|contextual-alt-values|initial|inherit|revert|revert-layer|unset";


Standard Syntax

font-variant-ligatures: none|normal|common-lig-values|discretionary-lig-values|historical-lig-values|contextual-alt-values|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
none Specifies that all ligatures and contextual forms are disabled, even common ones.
normal This is the default value. Defines the activation of the usual ligatures and contextual forms needed for correct rendering.
common-lig-values Control the most common ligatures, like for fi, ffi, th or similar. They correspond to the OpenType values liga and clig.

Possible values are:

  • common-ligatures activating these ligatures. Note that the keyword normal activates these ligatures.
  • no-common-ligatures deactivating these ligatures.
discretionary-lig-values Specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values dlig.

Possible values are:

  • discretionary-ligatures activating these ligatures.
  • no-discretionary-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures.
historical-lig-values Control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values hlig.

Possible values are:

  • historical-ligatures activating these ligatures.
  • no-historical-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures.
contextual-alt-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.

Possible values are:

  • contextual specifies that the contextual alternates are to be used. Note that the keyword normal usually activates these ligatures too.
  • no-contextual prevents their use.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  font-variant-ligatures: normal;
}
❮ Previous Reference Next ❯