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
To Continue Learning Please Login
Login with Google