font-synthesis

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

CSS 中的 font-systhesis 属性为浏览器提供关于如何处理指定 font-family 未包含加粗和斜体字符的说明。

以来自 Google Fonts 的 Lato 为例。 它说该字体有 10 种不同的变体。

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

这句通常需要四个不同的字体文件。

但是,并非所有字体都包含用于处理粗细和样式的文件。 在这些情况下,浏览器将自行“合成”外观。 浏览器尽其所能,但伪造加粗和样式有时会使文本的可读性降低;也就是说,可读性不如真正设计的版本。 在最轻微的情况下,我们可能会看到字符重叠。 在更严重的情况下,文本完全不可读,甚至可能会改变含义——正如汉语、日语、韩语和其他表意文字可能会发生的那样。

这就是 font-synthesis 的用武之地。 它控制浏览器允许合成哪些字体。

语法

.element {
  font-synthesis: none | [ weight || style ];
}

通俗地说,这意味着 font-synthesis 将接受

  • none
  • weightstyle 之一
  • weightstyle 都是

值得注意的是,font-synthesis 被认为是一个简写属性。 根据规范,它是 font-synthesis-weightfont-synthesis-style 的组合,两者都接受 autonone 值。 由于使用简写可以获得相同的效果,这可能是最好的方法。

  • 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%

桌面

IEEdgeFirefoxChromeSafariOpera
34+9+

移动

iOS SafariOpera MiniAndroid 浏览器Chrome for AndroidFirefox 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

更多信息