font-smooth

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

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 - 在大多数非视网膜显示屏上，这将提供最清晰的文本。

注意：Firefox 实现了一个类似的属性，但具有不同的值：-moz-osx-font-smoothing。它仅在 macOS 上有效。

  • auto - 允许浏览器选择字体平滑的优化，通常为grayscale。
  • grayscale - 使用灰度抗锯齿渲染文本，而不是亚像素。从亚像素渲染切换到深色背景上浅色文本的抗锯齿会使其看起来更浅。

正式定义

初始值auto
应用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

font-smooth =
  auto | never | always | <absolute-size> | <length>

示例

基本用法示例

以下示例显示了在 macOS 上打开字体平滑的 Safari/Chromium 和 Firefox 等效项。在这两种情况下，平滑后的字体应该看起来稍微更轻一些。

对于不在 macOS 系统上的用户，这里有一个屏幕截图（实时版本稍后出现）

Two texts examples one with the font-smooth property and another one without

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;
}

结果

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅