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.
font-synthesis CSS 属性控制浏览器可以合成（synthesize）哪些缺失的字体，粗体或斜体。
尝试一下
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;
}
大多数标准西方字体包含斜体和粗体变体，但许多新颖（novelty）的字体不包括这些。用于中文、日文、韩文和其他语标文字（logographic script）的字体往往不含这些变体，同时，从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下，可能最好关闭浏览器默认的 font-synthesis 字体合成特性。
| 初始值 | weight style small-caps position |
|---|---|
| 适用元素 | 所有元素和文本. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 是 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
语法
此属性（的值）可采用下列任意一种形式：
- 关键词
none - 关键词
weight或style - 关键词
weight和style。
属性值
形式化语法
font-synthesis =
none |
[ weight || style || small-caps || position ]
示例
HTML
html
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</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 |
浏览器兼容性
Loading…