font-synthesis

基线 广泛可用

此功能已得到很好的建立，并且在许多设备和浏览器版本中都适用。它自 2022 年 1 月.

**font-synthesis** 速记 CSS 属性允许您指定浏览器是否可以合成缺少的粗体、斜体、小写和大写或下标和上标字体，前提是它们在指定的字体系列中不存在。

试一试

构成属性

此属性是以下 CSS 属性的速记

语法

css
/* none or one or more of the other keyword values */
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: position;
font-synthesis: small-caps style; /* property values can be in any order */
font-synthesis: style small-caps weight position; /* property values can be in any order */

/* Global values */
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: revert-layer;
font-synthesis: unset;

值

none

表示浏览器可能不会合成任何粗体、斜体或小写字体。

weight

表示如果需要，浏览器可以合成缺少的粗体字体。

style

表示如果需要，浏览器可以合成斜体字体。

small-caps

表示如果需要，浏览器可以合成小写字体。

position

表示如果需要，浏览器可以合成下标和上标字体，前提是在使用 font-variant-position 时。

描述

大多数标准的西方字体包含斜体和粗体变体，一些字体包含小写和大写以及下标/上标变体。但是，许多字体不包含这些变体。用于中文、日语、韩语和其他表意文字的字体往往不包含这些变体，合成它们可能会影响可读性或改变文本的含义。在这些情况下，您可能希望关闭浏览器的默认字体合成功能。

例如，使用 :lang() 伪类，您可以禁用浏览器为语言（在本例中为阿拉伯语）合成粗体和斜体字符。

css
*:lang(ar) {
  font-synthesis: none;
}

下表显示了速记 font-synthesis 属性的值如何映射到组成部分的完整属性。

font-synthesis 值 font-synthesis-weight 值 font-synthesis-style 值 font-synthesis-small-caps 值 font-synthesis-position 值
none none none none none
weight auto none none none
style none auto none none
small-caps none none auto none
position none none none auto
weight style auto auto none none
weight small-caps auto none auto none
weight position auto none none auto
样式 小写大写 none auto auto none
样式 位置 none auto none auto
粗细 样式 小写大写 auto auto auto none
粗细 样式 位置 auto auto none auto
粗细 小写大写 位置 auto none auto auto
样式 小写大写 位置 none auto auto auto
粗细 样式 小写大写 位置 auto auto auto auto

正式定义

初始值粗细 样式 小写大写 位置
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值如指定
动画类型离散

正式语法

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

示例

禁用字体合成

此示例展示了浏览器默认的字体合成行为，并将其与合成行为关闭时的行为进行了比较。请注意，此示例使用两个导入的字体来演示此行为。您可能无法通过默认情况下在操作系统上提供的字体来复制关闭字体合成的操作。

HTML

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

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;
}

结果

规范

规范
CSS Fonts 模块 第 4 级
# font-synthesis

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅