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
: 这会阻止浏览器修改文本。
此属性还接受全局关键字值,包括 inherit
、initial
和 unset
。
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 17+ | 62+ | 79+ | 11+ | 66+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mini |
---|---|---|---|---|
85+ | 79+ | 81+ | 11+ | 全部 |
进一步阅读
- CSS 字体模块级别 4(编辑草案)
- MDN 文档
- 可变字体:光学大小、自定义轴和其他奇特性(响应式网页排版)