CSS - font-synthesis Property

The font-synthesis property determines whether or not the browser should synthesize the bold, italic, and / or small-caps typefaces that are missing in a font-family.

This property is a shorthand for following properties:

  • font-synthesis-weight

  • font-synthesis-style

  • font-synthesis-small-caps

Possible Values

Possible values will depend on how we are using this property.

  • none: Signifies that no bold, italic or small-caps typeface to be synthesized.

  • weight: Signifies that missing bold typeface may be synthesized by the browser.

  • style: Signifies that missing italic typeface may be synthesized by the browser.

  • small-caps: Signifies that missing small-caps typeface may be synthesized by the browser.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSynthesis = "none | weight | small-caps style";

CSS font-synthesis - Basic Example

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
<style>
   p {
      margin-bottom: 5px;
      border: 2px solid red;
   }
   .eng {
      font-family: "Montserrat", sans-serif;
   }
   .chi {
      font-family: "Ma Shan Zheng";
   }
   .no-syn {
      font-synthesis: none;
   }
   .syn {
      font-synthesis: style weight;
   }
</style>
</head>
<body>
   <h3>DEFAULT</h3>
   <p class="eng">
      Supports <strong>bold</strong> and <em>italic</em>.
   </p>
   <p class="chi"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
   <h3>DISABLED SYNTHESIS</h3>
   <p class="eng no-syn">
      Do not support <strong>bold</strong> and <em>italic.</em>
   </p>
   <h3>DISABLED SYNTHESIS</h3>
   <p class="chi no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
   <h3> SYNTHESIS IS ENABLED </h3>
   <p class="eng syn">
      Supports <strong>bold</strong> and <em>italic</em>.
   </p>
   <p class="chi syn"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
</body>
</html>
Advertisements