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 January 2022.

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

font-synthesis CSS 属性控制浏览器可以合成(synthesize)哪些缺失的字体,粗体或斜体。

尝试一下

大多数标准西方字体包含斜体和粗体变体,但许多新颖(novelty)的字体不包括这些。用于中文、日文、韩文和其他语标文字(logographic script)的字体往往不含这些变体,同时,从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下,可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

初始值weight style small-caps position
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型离散值

语法

此属性(的值)可采用下列任意一种形式:

  • 关键词 none
  • 关键词 weightstyle
  • 关键词 weightstyle

属性值

none

此关键词表示不合成粗体字型(typeface)或斜体字型。

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-synthesis
position
small-caps
style
weight

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support