macOS 与 font-smoothing 三两事

前些日子，搞了台 Mac mini 回家，这几天一直都在尝试主力用，当然关于新机的体验不在这里过多阐述。

正刷着 B 站，然后又看看我的站，就感觉字体渲染，怪怪的。我这边，就显得傻大黑粗，看起来该用 normal 的地方用了 bold，该用 bold 的地方用了 bolder 的样子，而 B 站那头，字体大小，文本粗细，井然有序。

于是便怀疑字体的问题，将字重、字号全部与 B 站那边统一，渲染效果还是不一样。

很迷茫，很不理解，Windows 上和 Linux 上，Android 与 OHOS，甚至是 iOS 与 iPad OS 上都没遇到过这种问题，macOS 上独占这个问题。

于是看了下 B 站那边 console 的计算样式，找到了这个东西：-webkit-font-smoothing: antialiased;

注释掉后，确实字体渲染发生变化了，然后粘回到我站之后，果不其然，文本渲染、粗细产生了很大变化。

发现问题来源后，搜了一下这个 CSS 的 mdn 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/font-smooth

font-smooth确实不是标准 CSS，但 Chrome 和 FireFox 在 macOS 上有自己的实现。

以下是 mdn 的原文：

备注：Webkit 实现了名为-webkit-font-smoothing的相似属性。该属性仅适用于 macOS。

• auto——由浏览器决定（如果可用，则使用亚像素抗锯齿；这是默认值）。
• none——关闭字体平滑；显示带有锯齿边缘的文本。
• antialiased——在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
• subpixel-antialiased——在大多数非视网膜显示器上，这将会提供最清晰的文本。

备注：Firefox 实现了名为-moz-osx-font-smoothing的相似属性。该属性仅适用于 macOS。

• auto——允许浏览器选择字体平滑的优化方式，通常为grayscale。
• grayscale——用灰度抗锯齿（而不是亚像素）渲染文本。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。

所以说，将以下内容追加到body上，即可实现在 macOS 系统上的字体平滑渲染：

body {
    ...
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

轶闻

为了测试效果，特意下了个 Firefox 在 macOS 上，结果呢...

可谓是一点效果，一点反应也没有啊，甚至还弹了兼容性提示。

然后好奇，刷新了下页面，把-webkit-font-smoothing: antialiased;追加到了 FireFox 的 console 的样式表里，您猜怎么着，直接生效！（Mozilla这是投敌了吗）（悲）

一边正常显示着效果，一边提示着自己不支持样式，就很怪。

自家的-moz-osx-font-smoothing不认，反而只认对家的-webkit-font-smoothing，emmmmm....