-webkit-font-smoothing 是 webkit 专属属性，在现代 chrome 和 firefox 中无效，windows/linux 渲染管线不支持；chrome 120+ 已废弃该属性，启用后反致文字发虚；应删除该声明，改用 font-optical-sizing: auto 或系统默认渲染。
font-smoothing 在 macOS 上生效但 Windows/Linux 没反应
这是因为 -webkit-font-smoothing 是 WebKit 内核专属，只在 Safari 和旧版 Chrome（基于 WebKit 时）起作用；Chromium 现代版本已移除对其的支持，Firefox 完全不识别。Windows 和 Linux 默认用的是 GDI 或 FreeType 渲染管线，压根不看这个属性。
实操建议：
- 别对
-webkit-font-smoothing: antialiased抱有跨平台幻想，它在 Win/Linux 下纯属摆设 - macOS 上它确实能弱化字体边缘的灰度过渡，让文字看起来“更细”，但会牺牲可读性——尤其小字号时易发虚
- 若想统一控制，优先用标准属性
font-optical-sizing: auto（支持较新）或依赖系统默认渲染行为更稳妥
font-smoothing 导致 Chrome 120+ 页面文字突然变模糊
Chrome 从 v115 起逐步废弃 -webkit-font-smoothing，v120 后部分渲染路径彻底忽略该声明，并可能触发回退到 subpixel 渲染异常路径，表现为文字边缘出现半透明像素、对比度下降。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 加了
-webkit-font-smoothing: antialiased后，中文字体（如 PingFang SC、Noto Sans CJK）明显发虚 - 同一段 CSS，在 Safari 显示锐利，在 Chrome 新版里像蒙了层纱
- DevTools 里该属性被标为 “invalid” 或直接不显示
实操建议：
- 立刻删掉所有
-webkit-font-smoothing声明，现代 Chrome 不需要它 - 如果真要微调渲染效果，改用
text-rendering: optimizeLegibility（仅影响字距与连字，不影响抗锯齿逻辑） - 避免在
body或全局选择器里批量应用，局部优化比全局 hack 更可控
替代方案：font-display 和 font-optical-sizing 的实际表现差异
font-display 控制的是字体加载策略（swap/block/optional），和抗锯齿无关；而 font-optical-sizing 才真正影响字形粗细适配——它让可变字体根据字号自动切换光学尺寸设计，间接提升清晰度。
使用场景与参数差异：
-
font-display: swap解决的是 FOIT/FOUT，不是模糊问题；滥用会导致闪动，和渲染质量无关 -
font-optical-sizing: auto对支持的字体（如 Inter、IBM Plex、思源黑体 2.0+）有效，但需字体文件本身包含 optical size 轴 - Windows 上开启
font-optical-sizing后，14px 文字可能自动切到「caption」设计变体，比手动缩放更清晰
性能提示：该属性无运行时开销，但依赖字体数据完整性；若用自定义字体，构建时需确认是否保留 opsz 变轴。
真正影响清晰度的底层配置：CSS 中容易被忽略的三个点
字体清晰度根本不在 font-smoothing，而在设备像素比、合成层级和文本绘制上下文。以下三点常被跳过，却直接决定最终效果：
- 确保页面没有意外触发
transform: translateZ(0)或will-change: transform——这会让文本进入 GPU 合成层，导致亚像素渲染失效，Win/mac 都会变糊 - 检查是否有
backface-visibility: hidden泛滥使用，它在某些 Chromium 版本中会干扰文本光栅化路径 - 避免在
html或body上设置font-size小于 12px（尤其 Windows），系统级渲染限制会让浏览器强制降级为 bitmap 字体
最麻烦的是：这些影响往往只在高分屏（2x/3x DPR）或远程桌面环境下才暴露，本地开发很难复现。
