font-smoothing 在 Chrome 和 Safari 上有时无效，因为它是 WebKit 专属非标准属性：Chrome v59+ 默认禁用，Safari 仅 macOS 部分生效，Windows 基本无效；Firefox 完全忽略，现代 Chrome 需硬件加速层才可能生效。
font-smoothing 在 Chrome 和 Safari 上为什么有时无效
因为 font-smoothing 是 WebKit 内核专属的非标准属性，Chrome 从 v59 开始默认禁用它，Safari 则只在 macOS 上部分生效；Windows 系统下基本不起作用——这不是你写错了，是浏览器根本没打算支持。
- 仅对 macOS 的 WebKit 渲染器（Safari、旧版 Chrome）有实际效果
- Firefox 完全忽略
-webkit-font-smoothing，也不提供等效替代 - 现代 Chrome 会无视
antialiased或subpixel-antialiased，除非页面启用了硬件加速层（比如加了transform: translateZ(0)）
真正跨平台可控的替代方案：text-rendering + font-optical-sizing
想让文字在不同系统上都更清晰，别押宝 font-smoothing，优先用标准属性组合：
-
text-rendering: optimizeLegibility：触发字体连字和更精细的字距调整，尤其对小字号英文有效 -
font-optical-sizing: auto：让可变字体自动适配尺寸，提升清晰度（需字体本身支持，如 Inter、Roboto Flex） - 搭配
font-weight使用具体数值（如450），避免normal导致 Windows 下渲染过粗
示例：
body {<br> -webkit-font-smoothing: antialiased;<br> text-rendering: optimizeLegibility;<br> font-optical-sizing: auto;<br>}
Windows 下字体发虚？检查是否意外触发了 ClearType 强制关闭
某些 CSS 会间接干扰 Windows 的 ClearType 渲染管线，比如：
立即学习“前端免费学习笔记（深入）”；
- 设置了
backface-visibility: hidden或perspective，可能让文本进 GPU 层，反而模糊 -
filter: opacity(0.99)这类“伪透明”操作，会让 IE/Edge 和部分 Chrome 版本放弃子像素渲染 - 使用了非系统默认字体且未提供
font-display: swap，加载期间 fallback 字体可能被错误抗锯齿
防锯齿不是万能解，设计阶段就得考虑字体兼容性
再精细的 CSS 也救不了不合适的字体选择。比如：
- 中文场景下，
font-family: "Helvetica Neue", Arial, sans-serif在 Windows 上会 fallback 到黑体，而黑体本身没有斜体/细体变体，font-weight: 300只会强行压缩，导致笔画粘连 - 用
font-smoothing强行“优化”思源黑体等开源中文字体，反而让 hinting 信息失效，小字号更难读 - 移动端 iOS Safari 对
-webkit-font-smoothing: subpixel-antialiased的支持已逐步弱化，iOS 17 后几乎退化为普通灰度抗锯齿
真正稳定的控制点其实在字体加载策略和 family fallback 链的设计里，而不是靠一个被浏览器不断削弱的私有属性硬撑。
