Open In App

CSS font-variant-ligatures Property

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS font-variant-ligatures property is used for controlling ligatures on a text’s font. A ligature is a special character that combines two or more characters into one. Ligatures are commonly used to give certain style or look to the text.

Syntax:

font-variant-ligatures: Keyword_values

Or

 font-variant-ligatures: Global_values 

Property values: This property accepts property values mentioned above and described below.

  • Keyword_values: This property value refers to the values defined by “normal”, “none”, “common-ligatures”, “no-common-ligatures”, “discretionary-ligatures”, “no-discretionary-ligatures”, “historical-ligatures”, “no-historical-ligatures”, “contextual”, “no-contextual”.
  • Global_values: This property value refers to the values defined by “inherit”, “initial”, “unset”.

Example 1: Below is the example that illustrates the use of font-variant-ligatures property using common-ligatures and no-common-ligatures.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            font-size: 5vw;
        }
 
        .off {
            font-variant-ligatures: no-common-ligatures;
            color: rgb(83, 241, 21);
        }
 
        .on {
            font-variant-ligatures: common-ligatures;
            color: rgb(96, 153, 4);
        }
    </style>
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div>
        <span class="off">wifi</span>
        <span class="on">wifi</span>
    </div>
</body>
</html>


Output:

Supported Browsers:

  • Google Chrome 34+
  • Firefox 34+
  • Safari 9.1+
  • Opera 21+
  • Edge 79+

Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads