别再依赖-webkit-font-smoothing，应组合使用text-rendering: optimizeLegibility、font-optical-sizing: auto（仅可变字体）并确认系统字体平滑开启；该属性在Chrome 120+/Edge 124+已失效，Safari 17+仅窄条件响应，Firefox从未支持。
直接结论：别再依赖 -webkit-font-smoothing 单打独斗，现代方案是组合 text-rendering: optimizeLegibility + font-optical-sizing: auto（仅对可变字体）+ 系统级确认，否则大概率白调。
为什么 -webkit-font-smoothing 越调越糊
这个属性只在 WebKit 内核（Safari、旧版 Chrome）里生效，且合法值只有三个：none、subpixel-antialiased、antialiased。写成 smooth 或 light 会被浏览器静默丢弃，不报错也不起效。更关键的是：macOS 系统设置里的「字体平滑」开关拥有最高优先级——哪怕你写了 -webkit-font-smoothing: subpixel-antialiased，只要用户在「系统设置 → 辅助功能 → 显示 → 字体平滑」里关了它，Safari 就强制降级为灰阶抗锯齿，文字立刻发虚。这不是 bug，是 WebKit 主动服从可访问性策略。
text-rendering: optimizeLegibility 是当前最稳的通用解
这是 W3C 标准属性，Chrome 115+、Firefox、iOS Safari、Android Chrome 全支持。它不单控制抗锯齿，还会启用字距调整（kerning）和连字（ligatures），对小字号中英文正文观感提升明显。但注意：
- 别直接挂在
body上——图标字体、数字标签、按钮文字可能因此发虚或间距异常 - 更适合局部使用，比如正文容器：
.article-content { text-rendering: optimizeLegibility; } - 避免和
auto或optimizeSpeed混用，前者无效，后者会关闭字距
小字号（≤14px）发虚？先检查字体加载和描边
12–14px 文字在开启 antialiased 后容易笔画粘连或变细，这不是 CSS 错，而是灰度抗锯齿的固有表现。此时应：
立即学习“前端免费学习笔记（深入）”；
- 改用
13px或14px+line-height: 1微调垂直居中，比硬扛antialiased更可靠 - 对系统黑体（如
-apple-system、system-ui）加-webkit-text-stroke: 0.5px transparent，能收紧 iOS 过度抗锯齿造成的灰蒙感；避免设成1px或带颜色 - 确保自定义字体用了
font-display: optional或block，防止加载前回退到极细系统字体（如 San Francisco Thin），重绘时产生临时模糊
可变字体用户别漏掉 font-optical-sizing: auto
如果你用的是 Inter、Fira Sans Variable、IBM Plex Sans Variable 这类可变字体，这条属性能自动适配不同字号下的笔画粗细，视觉稳定性远超手动调 font-smoothing。但它对普通 TTF/WOFF2 字体完全无效——加了也没用，别白费劲。
真正卡住字体清晰度的，往往不是 CSS 写得不够多，而是没确认测试机开了系统字体平滑、没区分字体类型就套参数、或者把 optimizeLegibility 当全局开关乱打。这些点一旦忽略，调再久也还是糊。
