DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
CSS 中的 font-systhesis
属性为浏览器提供关于如何处理指定 font-family
未包含加粗和斜体字符的说明。
以来自 Google Fonts 的 Lato 为例。 它说该字体有 10 种不同的变体。

每种字体变体在技术上都是不同的字体文件。 如果我们想要使用某些粗细和样式,那么我们需要链接这些文件,以便浏览器有东西可以加载。

但是,并非所有字体都包含用于处理粗细和样式的文件。 在这些情况下,浏览器将自行“合成”外观。 浏览器尽其所能,但伪造加粗和样式有时会使文本的可读性降低;也就是说,可读性不如真正设计的版本。 在最轻微的情况下,我们可能会看到字符重叠。 在更严重的情况下,文本完全不可读,甚至可能会改变含义——正如汉语、日语、韩语和其他表意文字可能会发生的那样。
这就是 font-synthesis
的用武之地。 它控制浏览器允许合成哪些字体。
语法
.element {
font-synthesis: none | [ weight || style ];
}
通俗地说,这意味着 font-synthesis
将接受
none
值weight
或style
之一weight
和style
都是
值得注意的是,font-synthesis
被认为是一个简写属性。 根据规范,它是 font-synthesis-weight
和 font-synthesis-style
的组合,两者都接受 auto
或 none
值。 由于使用简写可以获得相同的效果,这可能是最好的方法。
值
none
:不允许合成粗体或斜体weight
:浏览器可以合成粗体style
:浏览器可以合成斜体
font-synthesis: none; /* browser will not synthesize any font faces */
font-synthesis: style; /* browser will not synthesize a bold font face */
font-synthesis: weight; /* browser will not synthesize an oblique font face */
font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */
用法
font-synthesis
可以与所有元素一起使用,包括 ::first-letter
和 ::first-line
伪元素。
在某些情况下,不允许浏览器对整个语言进行粗体和斜体合成是有意义的,因为它们中的任何一个都会遮挡字符。 以下是从规范中提取的一个示例,它禁用了包含阿拉伯字符的合成粗体和斜体字体
/* Disables synthetic bolded and obliqued characters in Arabic */
*:lang(ar) { font-synthesis: none; }
演示
浏览器支持
在撰写本文时,caniuse 报告 font-synthesis
属性的 全球覆盖率为 20.21%。
桌面
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 否 | 34+ | 否 | 9+ | 否 |
移动
iOS Safari | Opera Mini | Android 浏览器 | Chrome for Android | Firefox for Android |
---|---|---|---|---|
9+ | 全部 | 否 | 否 | 68 |
想在电子邮件中使用 font-synthesis
吗? Campaign Monitor 报道 它受以下客户端支持
- Apple Mail 10+
- Outlook for Mac
- AOL Alto iOS 应用程序
- iOS Mail 10+
- Sparrow
- G Suite
- Gmail
- Google Inbox
更多信息
- CSS 字体模块级别 4 规范
- “CSS3 测试:
font-synthesis
“,作者 Eric Meyer - “如何使文本斜体”,作者 Chris Coyier