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

结果

规范

不属于任何规范。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-smooth
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Uses a non-standard name.

参见