font-smooth 在现代移动端浏览器中基本无效，因其是已废弃的 WebKit 私有属性，iOS Safari、Chrome for Android 和 Firefox Mobile 均忽略，CanIUse 标注无支持；真正影响字体清晰度的是 -webkit-font-smoothing（仅限 macOS）、text-rendering、font-weight/family 组合、硬件加速触发及字体加载控制等。
font-smooth 在现代移动端浏览器中基本无效，别白费力气去调它。
为什么 font-smooth 对 iOS 和 Android 几乎没用
这个属性是 WebKit 早期私有特性，仅在旧版 Safari（macOS）上部分生效；iOS Safari、Chrome for Android、Firefox Mobile 全部忽略 font-smooth。实测设置 font-smooth: always 或 antialiased 后，字体渲染完全无变化——不是你写错了，是浏览器压根不读。
- iOS 15+ 和 Android Chrome 100+ 已移除对该属性的解析逻辑
- CanIUse 明确标注为
no support（包括所有移动端主流引擎） - 即使强行加上，DevTools 的 computed 面板里也看不到该属性值
真正影响移动端字体清晰度的关键 CSS 属性
字体“发虚”“发灰”“边缘锯齿”，根源不在抗锯齿开关，而在系统级渲染策略和 CSS 渲染上下文。以下才是可落地的控制点：
-
-webkit-font-smoothing: antialiased：仅对 macOS Safari 有效，移动端无效，但很多人误以为它管用 -
text-rendering: optimizeLegibility：触发更精细的字距与连字处理，iOS Safari 和 Chrome Android 均支持，对小字号中文尤其明显 -
font-weight和font-family组合：避免用light或thin字重配非系统字体，iOS 默认对非 SF 字体降级使用 bitmap fallback，导致模糊 -
transform: translateZ(0)或will-change: transform：强制开启硬件加速图层，有时能绕过某些 Android WebView 的 subpixel 渲染 bug（尤其在低 DPI 屏幕上）
移动端字体清晰度的硬性前提：字体来源与加载控制
再好的 CSS 也救不了加载失败或被降级的字体。常见翻车点：
- 用
@font-face引入的自定义字体未声明font-display: swap，导致 iOS Safari 在字体加载完成前用极细的系统后备字体撑开布局，加载后突然变粗——视觉上像“抖动+模糊” - 未提供
woff2格式，Android 旧 WebView 回退到ttf，解码慢且渲染质量差 - 在
meta viewport中漏掉initial-scale=1，触发 iOS 的 zoom 缩放渲染路径，所有文字自动走低精度 rasterization - 对
rem或em基准值设得过小（如html { font-size: 10px; }），导致实际渲染像素不足，系统直接插值模糊
最常被忽略的是：iOS 上 system-ui 字体栈必须写全，font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 缺一环，就可能 fallback 到过时的 Helvetica，而它在 Retina 屏上没有 proper hinting，小字号必糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
