CSS font-variant-ligatures Property
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
Share your thoughts in the comments
Please Login to comment...