CSS - font-variant-ligatures Property
The font-variant-ligatures property in CSS is used to control the use of ligatures in text. Ligatures are artistic letter combinations used in some typefaces to improve legibility and aesthetics. This property allows you to enable or disable specific types of ligatures in text.
Possible Values
normal: Default value, allowing ligatures to be used as defined by the font.
none: All ligatures and contextual forms are disabled.
<common-lig-values>: Enables commonly required ligatures, such as fi, ffi, th or similar. Corresponds to OpenType values liga and clig.
common-ligatures: Activates the above mentioned ligatures.
no-common-ligatures: Deactivates the above mentioned ligatures.
<discretionary-lig-values>: Controls specific ligatures. Corresponds to OpenType value dlig.
discretionary-ligatures: Activates the above mentioned ligatures.
no-discretionary-ligatures: Deactivates the above mentioned ligatures.
<historical-lig-values>: Controls the historical ligatures. Corresponds to OpenType value hlig.
historical-ligatures: Activates the above mentioned ligatures.
no-historical-ligatures: Deactivates the above mentioned ligatures.
<contextual-alt-values>: Enables contextual ligatures, which depend on the surrounding characters. Corresponds to OpenType value calt.
contextual: Activates the above mentioned ligatures. Keyword normal also activates these ligatures.
no-contextual: Deactivates the above mentioned ligatures.
Applies to
All the HTML elements.
DOM Syntax
object.style.fontVariantLigatures = "normal | none | <common-lig-values>";
CSS font-variant-ligatures - Basic Example
Here is an example:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto Mono"> <style> p { font-family: "Roboto Mono", serif; } .normal { font-variant-ligatures: normal; } .none { font-variant-ligatures: none; } .com-lig { font-variant-ligatures: common-ligatures; } .no-com-lig { font-variant-ligatures: no-common-ligatures; } .disc-lig { font-variant-ligatures: discretionary-ligatures; } .no-disc-lig { font-variant-ligatures: no-discretionary-ligatures; } .hist-lig { font-variant-ligatures: historical-ligatures; } .no-hist-lig { font-variant-ligatures: no-historical-ligatures; } .context { font-variant-ligatures: contextual; } .no-context { font-variant-ligatures: no-contextual; } </style> </head> <body> <p class="normal"> normal - if fi ff tf ft jf fj </p> <p class="none"> none - if fi ff tf ft jf fj </p> <p class="com-lig"> common-ligatures - if fi ff tf ft jf fj </p> <p class="no-com-lig"> no-common-ligatures - if fi ff tf ft jf fj </p> <p class="disc-lig"> discretionary-ligatures - if fi ff tf ft jf fj </p> <p class="no-disc-lig"> no-discretionary-ligatures - if fi ff tf ft jf fj </p> <p class="hist-lig"> historical-ligatures - if fi ff tf ft jf fj </p> <p class="no-hist-lig"> no-historical-ligatures - if fi ff tf ft jf fj </p> <p class="context"> contextual - if fi ff tf ft jf fj </p> <p class="no-context"> no-contextual - if fi ff tf ft jf fj </p> </body> </html>
Note: Change the font-family to another value and observe the change.
To Continue Learning Please Login
Login with Google