font-variant-ligatures
Quick Summary for font-variant-ligatures
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.
Code Usage for font-variant-ligatures
/* Keyword values */ font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures;           /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */ font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */ font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */ font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */ font-variant-ligatures: contextual;                 /* <contextual-alt-values> */ font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */  /* Global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: revert; font-variant-ligatures: unset; 
More Details for font-variant-ligatures

font-variant-ligatures

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.

Syntax

/* Keyword values */ font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures;           /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */ font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */ font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */ font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */ font-variant-ligatures: contextual;                 /* <contextual-alt-values> */ font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */  /* Global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: revert; font-variant-ligatures: unset; 

The font-variant-ligatures property is specified as one of the keyword values listed below.

Values

normal

This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.

none

This keyword specifies that all ligatures and contextual forms are disabled, even common ones.

<common-lig-values>

These values control the most common ligatures, like for fi, ffi, th or similar. They correspond to the OpenType values liga and clig. Two values are possible:

common-ligatures activating these ligatures. Note that the keyword normal activates these ligatures. no-common-ligatures deactivating these ligatures. <discretionary-lig-values>

These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values dlig. Two values are possible:

discretionary-ligatures activating these ligatures. no-discretionary-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures. <historical-lig-values>

These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values hlig. Two values are possible:

historical-ligatures activating these ligatures. no-historical-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures. <contextual-alt-values>

These 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. Two values are possible:

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.

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]

Examples

Setting font ligatures and contextual forms

HTML
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"> <p class="normal">   normal<br>   if fi ff tf ft jf fj </p> <p class="none">   none<br>   if fi ff tf ft jf fj </p> <p class="common-ligatures">   common-ligatures<br>   if fi ff tf ft jf fj </p> <p class="no-common-ligatures">   no-common-ligatures<br>   if fi ff tf ft jf fj </p> <p class="discretionary-ligatures">   discretionary-ligatures<br>   if fi ff tf ft jf fj </p> <p class="no-discretionary-ligatures">   no-discretionary-ligatures<br>   if fi ff tf ft jf fj </p> <p class="historical-ligatures">   historical-ligatures<br>   if fi ff tf ft jf fj </p> <p class="no-historical-ligatures">   no-historical-ligatures<br>   if fi ff tf ft jf fj </p> <p class="contextual">   contextual<br>   if fi ff tf ft jf fj </p> <p class="no-contextual">   no-contextual<br>   if fi ff tf ft jf fj </p> <p class="contextual">   contextual<br>   if fi ff tf ft jf fj </p> 
CSS
p {   font-family: Lora, serif; } .normal {   font-variant-ligatures: normal; }  .none {   font-variant-ligatures: none; }  .common-ligatures {   font-variant-ligatures: common-ligatures; }  .no-common-ligatures {   font-variant-ligatures: no-common-ligatures; }  .discretionary-ligatures {   font-variant-ligatures: discretionary-ligatures; }  .no-discretionary-ligatures {   font-variant-ligatures: no-discretionary-ligatures; }  .historical-ligatures {   font-variant-ligatures: historical-ligatures; }  .no-historical-ligatures {   font-variant-ligatures: no-historical-ligatures; }  .contextual {   font-variant-ligatures: contextual; }  .no-contextual {   font-variant-ligatures: no-contextual; }  .contextual {   font-variant-ligatures: contextual; } 
Result

Specifications

Specification
CSS Fonts Module Level 4 # font-variant-ligatures-prop

See Also

font-variant-alternates font-variant-caps font-variant-east-asian font-variant font-variant-numeric

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

inherit

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.
inherit css reference