-webkit-font-smoothing 在 macos 和 windows 上表现不一致，因依赖系统渲染机制：macos 默认 subpixel 抗锯齿更柔，windows 用 grayscale 更硬；该属性仅 webkit 有效，且受 font-weight、transform 等限制，全局设置易失效，推荐结合 -moz-osx-font-smoothing、text-rendering: optimizelegibility 和 translatez(0) 提升跨平台可读性。
font-smoothing 在 macOS 和 Windows 上表现不一致
font-smoothing 不是标准 CSS 属性，它只在 WebKit 内核浏览器（Chrome、Safari）中部分生效，且行为依赖操作系统底层渲染机制。macOS 启用 subpixel antialiasing，默认更“柔”，Windows 则倾向 grayscale，字体边缘更硬、更细。
-
-webkit-font-smoothing: antialiased会让 macOS 放弃 subpixel，转为灰度抗锯齿，字形变细、对比变强，但可能降低可读性 -
-webkit-font-smoothing: subpixel-antialiased是 macOS 默认值，不可在 Windows 上触发任何效果 -
font-smooth（旧 Firefox）和text-rendering都不能跨平台统一控制像素级渲染逻辑
为什么加了 -webkit-font-smoothing 还是没变化？
常见原因是选择器权重不足或被后续规则覆盖，尤其在使用 CSS-in-JS 或框架默认样式时。另一个关键点：该属性仅对非 font-weight: bold 或非 transform: scale() 的文本生效——一旦有这些，WebKit 会自动回退到系统默认渲染策略。
- 检查 computed styles 中
-webkit-font-smoothing是否真的 applied，而不仅是 declared - 避免在
body或全局重置里写，优先作用于具体文本容器（如.article-content） - 不要和
backface-visibility: hidden或will-change: transform同时用，它们会干扰渲染管线
替代方案：用 text-rendering + font-feature-settings 控制可读性
比起强行“平滑”，更稳妥的做法是引导浏览器用更保守的渲染路径。text-rendering: optimizeLegibility 在多数现代浏览器中能激活连字和更精细的字距调整，对中文影响小，但对英文/数字明显提升清晰度；配合 font-feature-settings: "liga" 可进一步稳定字形。
-
text-rendering: geometricPrecision适合图标字体或 SVG 文本，但会让普通文本发虚 -
text-rendering: auto是默认值，在 Chrome/Firefox 中实际行为不一致，不建议显式设置 - 对中文字体，
font-feature-settings几乎无效，别白费劲
真正起效的最小实践组合
没有银弹，但下面这段 CSS 在 Chrome/macOS、Edge/Windows、Firefox/Linux 上实测最接近“一致可读”：
.text-body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* 禁用可能触发 subpixel 的缩放 */
transform: translateZ(0);
}
注意：-moz-osx-font-smoothing 是 Firefox 专属，只在 macOS 生效，Windows 下忽略；translateZ(0) 是为了强制硬件加速层，防止某些情况下渲染策略被降级——但它本身不是字体修复手段，只是辅助条件。
字体渲染差异本质是系统级决策，CSS 能撬动的杠杆很有限。真要跨平台一致，得从字体文件本身入手：选支持多平台 hinting 的字体，或用 variable font 的 wdth/wght 轴做微调，而不是指望一个 vendor prefix 属性搞定所有事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
