chrome 120+ 已废弃 -webkit-font-smoothing，safari 仍支持但受限于系统设置与渲染上下文；中文字体启用 antialiased 反而发虚；应改用 text-rendering、font-optical-sizing 和显式 font-weight 等标准属性。
Chrome 120+ 和 Safari 对 -webkit-font-smoothing 的处理完全不同
Chrome 120+ 已彻底废弃 -webkit-font-smoothing，声明它不会触发任何渲染逻辑，DevTools 中常显示为 “invalid” 或直接不出现；而 Safari（macOS/iOS）仍完整支持，但仅在特定条件下生效——比如非 Retina 屏、未启用系统字体平滑开关、且文本未被 transform 或 text-rendering 干扰时。你看到“Mac 上有效、Windows 上无效”，其实是 Safari 还认它，Chrome 根本不读。
-webkit-font-smoothing: antialiased 在 macOS 上反而让中文字体发虚
这个值会让 Core Text 放弃 subpixel 抗锯齿，切到 grayscale 模式，对 PingFang SC、Noto Sans CJK 等中文字体尤其明显：小字号下边缘变细、灰阶过渡生硬、可读性下降。这不是 bug，是设计行为。常见错误包括：
- 全局写在
body上，结果被 React 组件内联样式或 CSS-in-JS 高权重规则覆盖 - 和
font-weight: bold或transform: scale(1.001)同时存在，WebKit 自动跳过该属性 - 在 macOS 系统设置里关闭了「字体平滑」，Safari 会强制降级，CSS 声明完全失效
真正跨浏览器可控的替代方案只有三个标准属性
别再调试私有前缀，现代浏览器只响应以下组合：
-
text-rendering: optimizeLegibility：激活连字与精细字距，在英文/数字场景提升清晰感，对中文影响小但安全 -
font-optical-sizing: auto：必须搭配可变字体（如 Inter、Roboto Flex），根据font-size自动切换光学尺寸，比任何抗锯齿 hack 更有效 -
font-weight显式用数值（如450或500），避免normal在 Windows 上映射为粗 hinting 导致糊团
删掉所有 -webkit-font-smoothing 和 -moz-osx-font-smoothing 声明
它们现在只增加维护成本，不解决实际问题。Firefox 从未支持前者，-moz-osx-font-smoothing 早在 Firefox 90+ 就被标记为废弃，且只对 macOS 有效。如果你刚升级 Chrome 到 120+ 或 Edge 124+，页面文字突然变模糊，第一反应不是调参，而是打开 DevTools → Fonts 面板，确认真实加载的字体和字重——模糊往往来自 fallback 字体栈断裂或 font-display: swap 引发的重绘，而不是抗锯齿没开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
