CSS - font-synthesis-small-caps Property

The font-synthesis-small-caps determines whether or not the browser may synthesize small-caps typeface when it is missing in a font family.

Possible Values

  • auto: Browser may synthesize the missing small-caps typeface.

  • none: Synthesis of missing small-caps typeface by browser is not allowed.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSynthesisSmallCaps = "auto | none";

css font-synthesis-small-caps - Basic Example

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
   .fontfmly {
      font-family: "Montserrat", sans-serif;
   }
   .var-small-caps {
      font-variant: small-caps;
   }
   .no-syn {
      font-synthesis-small-caps: none;
   }
</style>
</head>
<body>
   <p class="fontfmly">
      Variant <span class="var-small-caps">small-caps</span> is set here.
   </p>

   <p class="fontfmly no-syn">
      The synthesis of <span class="var-small-caps">small-caps</span> typeface is turned off.
   </p>
</body>
</html>
Advertisements