font-synthesis

Baseline

Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2022ë 1ì.

* Some parts of this feature may have varying levels of support.

CSS font-synthesis ìì±ì ë¸ë¼ì°ì ê° êµµì ê¸ê¼´ê³¼ ì´í¤ë¦ ê¸ê¼´ì í©ì±íë ê²ì íì©í ì§ ì¤ì í©ëë¤.

ìëí´ ë³´ê¸°

font-synthesis: weight style small-caps;

font-synthesis: none;

font-synthesis: weight;

font-synthesis: style;

font-synthesis: small-caps;

font-synthesis: position;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p class="english">
      This font does not include <span class="bold">bold</span>,
      <span class="italic">italic</span>,
      <span class="small-caps">small-caps</span>, and
      <span class="sub">subscript</span> or
      <span class="sup">superscript</span> variants.
    </p>
    <p class="chinese">
      ä¸ææçéå¸¸ä¸è¿ç¨<span class="bold">ç²ä½</span>æ<span class="italic"
        >æä½</span
      ><span class="sub">å¸¸ä¸</span><span class="sup">è¿ç¨</span>ã
    </p>
  </div>
</section>

@font-face {
  font-family: Oxygen;
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2")
    format("woff2");
}

/* [108] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.108.woff2")
    format("woff2");
}
/* [110] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.110.woff2")
    format("woff2");
}
/* [117] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.117.woff2")
    format("woff2");
}
/* [118] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.118.woff2")
    format("woff2");
}
/* [119] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.119.woff2")
    format("woff2");
}

.english {
  font-size: 1.2em;
  font-family: Oxygen;
}

.chinese {
  font-size: 1.2em;
  font-family: "Ma Shan Zheng";
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.small-caps {
  font-variant: small-caps;
}

.sub {
  font-variant: sub;
}

.sup {
  font-variant: super;
}

êµ¬ë¬¸

font-synthesisë ë¤ì ë°©ë² ì¤ íëë¥¼ ì¬ì©í´ ì§ì í©ëë¤.

none í¤ìë.
weight ëë style í¤ìë.
weightì style í¤ìë.

ê°

none: êµµì ê¸ê¼´ê³¼ ì´í¤ë¦ ê¸ê¼´ì í©ì±ì ê¸ì§í©ëë¤.
weight: íìí ê²½ì° êµµì ê¸ê¼´ì í©ì±í ì ììµëë¤.
style: íìí ê²½ì° ì´í¤ë¦ ê¸ê¼´ì í©ì±í ì ììµëë¤.

íì ì ì

ì´ê¸°ê°	`weight style small-caps position`
ì ì©ëì	all elements and text. It also applies to `::first-letter` and `::first-line`.
ìì	yes
ê³ì° ê°	as specified
Animation type	discrete

íì êµ¬ë¬¸

font-synthesis = 
  none                                           |
  [ weight || style || small-caps || position ]

ìì

ê¸ê¼´ í©ì± ë¹íì±í

HTML

html

<em class="syn">ì  í©ì±íì¸ì! Synthesize!</em>
<br />
<em class="no-syn">ì  í©ì±íì§ ë§ì¸ì! Synthesize!</em>

CSS

css

em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}

ê²°ê³¼

ëªì¸

Specification
CSS Fonts Module Level 4 # font-synthesis

ë¸ë¼ì°ì í¸íì±

ê°ì´ ë³´ê¸°

Help improve MDN

Learn how to contribute

This page was last modified on 2025ë 11ì 2ì¼ by MDN contributors.

View this page on GitHub â¢ Report a problem with this content