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
Ever tried. Ever failed. No matter. Try again. Fail again. Fail better. You won't believe what you can accomplish by attempting the impossible with the courage to repeatedly fail better.
Unknown
Random CSS Property

color-scheme

The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
color-scheme css reference