font-smooth

非标准: 该特性是非标准的,请尽量不要在生产环境中使用它!

font-smooth CSS 属性控制字体渲染时应用的抗锯齿效果。

语法

css
/* 关键字值 */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> 值 */
font-smooth: 2em;

/* 全局值 */
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
适用元素所有元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

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

示例

基础使用示例

以下示例展示了在 macOS 上打开字体平滑的 Safari/Chromium 和 Firefox 的等效结果。对于这两类情况,平滑的字体应该看起来更细一些。

对于那些没有使用 macOS 系统的用户,这里有一张截图(后面会有实时版本):

两类文本示例,一个具有 font-smooth 属性,而另一个则不具有

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 tables only load in the browser

参见