-webkit-font-smoothing几乎不会让字体变清晰，仅在macOS Safari有限生效且受系统设置压制，iOS、Android新版Chrome、Firefox及现代Edge均不支持。
直接说结论：加 -webkit-font-smoothing 几乎不会让字体“变清晰”，反而可能掩盖真正的问题——它在 iOS、Android 新版 Chrome、Firefox 和现代 Edge 中完全不生效，只在 macOS Safari 有有限作用，且效果受系统设置压制。
为什么 -webkit-font-smoothing 在真机上没反应
这不是你写错了选择器或漏了前缀。iOS Safari（包括微信、钉钉等所有 WKWebView 容器）硬性忽略该属性；Chrome/Edge 自 110 版本起已移除解析逻辑，DevTools 的 computed 面板里根本看不到这行声明；Firefox 从不支持 -webkit- 前缀版本，只认 -moz-osx-font-smoothing（仅限 macOS）。
常见错误现象：
-
-webkit-font-smoothing: antialiased在 macOS Safari 调试时有效，一到 iPhone 就失效 - 反复加
!important或提升选择器权重，但渲染结果毫无变化 - 误以为是字体加载慢导致模糊，实则字体早已加载完成，只是边缘被系统强制柔化
真正影响清晰度的三个可控点
字体“发虚”“灰边”“边缘糊”，根源不在抗锯齿开关，而在渲染上下文是否稳定、字体是否被正确加载、系统是否被迫降级处理。
立即学习“前端免费学习笔记（深入）”；
-
text-rendering: optimizeLegibility：iOS Safari、Chrome Android、Firefox Mobile 均支持，能激活字距调整和连字，小字号中文观感更锐利；别用auto或optimizeSpeed -
-webkit-text-stroke: 0.5px transparent：对 system-ui / -apple-system 类黑体特别有效，透明描边能收紧 iOS 默认过度抗锯齿造成的灰蒙感；避免设为1px或带颜色 -
font-display: optional或block：防止自定义字体加载前回退到极细系统字体（如 San Francisco Thin），再重绘时产生视觉抖动+临时模糊；swap在移动端易引发 FOUT 闪动，慎用
macOS 系统设置会覆盖所有 CSS 设置
即使你在 CSS 里写了 -webkit-font-smoothing: subpixel-antialiased，只要用户在「系统设置 → 辅助功能 → 显示 → 字体平滑」中关闭了开关，Safari 就会强制降级为灰阶抗锯齿——文字立刻发虚、细节模糊。这不是 bug，是 WebKit 主动服从系统可访问性策略。
开发时务必确认测试机开启了字体平滑；用户反馈“文字模糊”，第一件事不是改 CSS，而是问：“你的 macOS 字体平滑开关开着吗？”
没有 CSS 方式能绕过这个限制。
viewport 和 device-pixel-ratio 导致的物理级模糊
很多“字体不清晰”根本不是渲染参数问题，而是页面被缩放了。比如 <meta name="viewport" content="width=device-width"> 漏了 initial-scale=1，或内容宽度超出视口，浏览器自动缩放，文字就被插值拉伸模糊。
另一个常被忽略的点：window.devicePixelRatio。iPhone 13 是 3x，如果你写 font-size: 14px，实际渲染像素远超 14，系统会在高分屏上做次采样柔化——这时候调 font-smoothing 已经晚了。
真正有效的做法是：固定 viewport 缩放、用 rem/em 时注意基准值别设太小（如避免 html { font-size: 10px; }）、优先使用 system-ui 字体栈保底。
