font-variant-ligatures

Description
Syntax
Examples
Links

Description

The font-variant-ligatures property for CSS specifies ways of combining glyphs to produce more harmonized forms.

Syntax

CSS

font-variant-ligatures: value;

JS

object.style.fontVariantLigatures = "value";

Values

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

normal

Specifies that common default features are enabled.

none

Specifies that all types of ligatures and contextual forms covered by this property are explicitly disabled.

<common-lig-values> = [ common-ligatures | no-common-ligatures ]

common-ligatures

Enables display of common ligatures (OpenType features: liga, clig).

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).

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).

no-contextual

Disables display of contextual alternates (OpenType feature: calt).

Initial

normal

<!doctype html>
<html>
<head>
    <style>
        p
        {
            font-size: 48px;
        }
    </style>
</head>
<body>
    <button>initial</button><br>
    <button>common-ligatures</button>
    <button>no-common-ligatures</button><br>
    <button>contextual</button>
    <button>no-contextual</button><br>
    <button>discretionary-ligatures</button>
    <button>no-discretionary-ligatures</button><br>
    <button>historical-ligatures</button>
    <button>no-historical-ligatures</button><br>
    <button>none</button>
    <button>normal</button>
    <p>font-variant-ligatures</p>
    <p>ff fi fj ft if jf tf</p>
    <script>
        function myfunction(myparameter)
        {
            for(const myp of document.querySelectorAll("p"))
            {
                myp.style.fontVariantLigatures = myparameter.target.innerHTML;
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>