CSS font-synthesis Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-synthesis property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. If 'weight' is not specified, user agents must not synthesize bold faces and if 'style' is not specified user agents must not synthesize italic faces. A value of 'none' disallows all synthetic faces.

Initial value: weight style
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontSynthesis

Interactive Demo

font-synthesis: weight style small-caps;

font-synthesis: none;

font-synthesis: weight;

font-synthesis: style;

font-synthesis: small-caps;

This font does not include bold, italic, small-caps, and subscript or superscript variants.

中文排版通常不运用粗体或斜体常不运用。

Syntax

font-synthesis: none | [ weight || style ]

Values

noneBrowser is not allowed to synthesize bold or oblique font when not available.
weightBrowser is only allowed to synthesize bold font when not available but not oblique.
styleBrowser is only allowed to synthesize oblique font when not available but not bold.
weight styleBrowser is allowed to synthesize both bold and oblique.

Example

HTML

<pre> DEFAULT </pre>

<p class="english">

  This font supports <strong>bold</strong> and <em>italic</em>.

</p>

<p class="chinese">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>

<br />



<pre> SYNTHESIS IS DISABLED </pre>

<p class="english no-syn">

  This font supports <strong>bold</strong> and <em>italic.</em>

</p>

<p class="chinese no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>

<br />



<pre> SYNTHESIS IS ENABLED </pre>

<p class="english">

  This font supports <strong>bold</strong> and <em>italic</em>.

</p>

<p class="chinese syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.chinese {
  font-family: "Ma Shan Zheng";
}
.no-syn {
  font-synthesis: none;
}
.syn {
  font-synthesis: style weight;
}

Result

Editor