font-optical-sizing

Avatar of Geoff Graham
Geoff Graham

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

font-optical-sizing CSS 属性允许浏览器调整字体字形的轮廓,以使其在不同大小下更易读。例如,较小的文本可能会得到更厚的轮廓以提高其对比度。另一方面,较大的文本可能会得到一些更“精致”的东西,引用 规范

.element {
  font-optical-sizing: none;
}

字形有轮廓吗?

当然!事实上,所有字形都有轮廓,并且它们会随着字体大小的改变而缩放。问题是,在很小的字体大小下,超薄的轮廓可能无法提供足够的对比度,从而无法达到最佳可读性;同样,在较大的尺寸下,更厚的轮廓可能具有过大的重量和对比度。font-optical-sizing 试图通过允许浏览器调整轮廓来纠正这种情况,使其在不同的比例下更易读。结果将是更清晰的文本,以及根据字体大小而缩窄或加宽的文本长度。

这仅适用于支持光学调整大小的字体

支持光学调整大小的字体是可变字体,包括 Roboto Delta,它是 Google 经典 Roboto 的可变版本。另一个支持的字体是 Amstelvar。这两个字体都由 Type Network维护。

即使是可变字体,也必须明确支持光学调整大小作为一项功能。

另一种光学调整字体大小的方法

font-optical-sizing 属性是光学调整支持该属性的字体的最有效方法。另一种方法是使用 font-variation-settings 属性,它允许您使用 opsz 控制光学调整大小,这是支持它的可变字体上的光学调整大小的关键字。

请注意,使用 font-variation-settings 需要您根据字体大小设置 opsz,以便一切正常缩放。

.element {
  font-size: 18px;
  font-variation-settings: 'opsz', 18;
}

语法

font-optical-sizing: auto | none;
  • 初始值:auto
  • 应用于:所有元素
  • 继承:
  • 计算值:指定的关键字
  • 动画类型:离散

  • auto: 这是默认值。它允许浏览器优化不同字体大小下的文本可读性。
  • none: 这会阻止浏览器修改文本。

此属性还接受全局关键字值,包括 inheritinitialunset

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
17+62+79+11+66+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mini
85+79+81+11+全部
来源:caniuse

进一步阅读