font-smooth
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
font-smooth CSS 属性控制字体渲染时抗锯齿的应用。
语法
css
/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;
/* <length> value */
font-smooth: 2em;
/* Global values */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;
注意： WebKit 实现了一个类似的属性，但值不同：-webkit-font-smoothing。它只在 macOS 上有效。
auto- 让浏览器决定（可用时使用亚像素抗锯齿；这是默认值）none- 关闭字体平滑；显示带有锯齿状锐利边缘的文本。antialiased- 在像素级别而不是亚像素级别平滑字体。将深色背景上的浅色文本从亚像素渲染切换到抗锯齿，会使其看起来更浅。subpixel-antialiased- 在大多数非 Retina 显示器上，这将提供最清晰的文本。
注意： Firefox 实现了一个类似的属性，但值不同：-moz-osx-font-smoothing。它只在 macOS 上有效。
auto- 允许浏览器选择字体平滑的优化，通常是grayscale。grayscale- 使用灰度抗锯齿而不是亚像素渲染文本。将深色背景上的浅色文本从亚像素渲染切换到抗锯齿，会使其看起来更浅。
正式定义
正式语法
font-smooth =
auto |
never |
always |
<absolute-size> |
<length>
示例
基本用法示例
以下示例显示了 Safari/Chromium 和 Firefox 在 macOS 上启用字体平滑的等效效果。在这两种情况下，平滑的字体在视觉上应该会显得稍轻。
对于不在 macOS 系统上的用户，这里有一个截图（实时版本稍后显示）
HTML
html
<p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>
CSS
css
html {
background-color: black;
color: white;
font-size: 3rem;
}
p {
text-align: center;
}
.smoothed {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
结果
规范
不属于任何标准。
浏览器兼容性
加载中…
另见
- 请停止“修复”字体平滑 作者：Dmitry Fadeyev (2012)
- 自由放任的字体平滑和抗锯齿 作者：Zach Leatherman (2017)