移动端字体模糊源于系统级渲染限制：iOS Safari硬性忽略-webkit-font-smoothing，Android WebView对小于16px字号强制降级，3D变换关闭亚像素渲染，CSS调优需绕过而非强加无效属性。
移动端字体模糊，不是“渲染不够平滑”，而是你正被系统级渲染策略卡住——iOS Safari 无视 -webkit-font-smoothing，Android WebView 对小字号直接降级，3D 变换强制关闭亚像素渲染。所有 CSS 调优都得绕过这些硬限制，而不是对着无效属性反复加 !important。
为什么 -webkit-font-smoothing 在 iOS 上完全没用
这不是你写错了 selector 或漏了前缀，是 WebKit 硬性禁用：无论设成 antialiased 还是 subpixel-antialiased，iOS Safari 和所有基于 WKWebView 的容器（微信、抖音内嵌页）都会忽略该声明。你看到的“发虚”文字，其实是系统用 San Francisco 的细体变体回退渲染的结果，跟抗锯齿设置无关。
- 真正起作用的是
font-display：它控制自定义字体加载期间是否闪出系统字体，而闪动过程伴随缩放和重排，视觉上就是模糊 -
font-display: optional在 iOS 下更倾向跳过加载慢的字体，反而减少模糊期；swap虽常用，但小字号下回退字体与最终字体的字宽差异会放大抖动 - 别在
@font-face里写-webkit-font-smoothing—— 它不生效，还干扰构建工具解析
Android 上 font-size 小于 16px 就糊，不是错觉
Android 系统文本渲染有隐式阈值：计算后字号
- 关键不是单位（px/rem/em），而是最终计算值 ≥
16px：用rem时，确保html { font-size: 16px }是底线，不能更低 -
input、textarea必须单独加固：input, textarea { font-size: 16px !important; }，否则获焦时浏览器可能覆盖你的样式 - line-height 过小（如
line-height: 1）会让字符挤压粘连，加剧模糊感；配合letter-spacing: 0.02em才能拉开可读空间
transform 引发的模糊，根源不在 transform 本身
模糊不是因为写了 translate3d(0, 0, 0)，而是它触发了 GPU 合成层，浏览器为保帧率主动放弃亚像素渲染。Chrome DevTools 的 Layers 面板里，文字区域标红 + 多层叠叠，就说明已被强制转为位图纹理。
立即学习“前端免费学习笔记（深入）”；
- 删掉
opacity: 0.99比调perspective更有效：任何非 1 的 opacity 都会升层，哪怕只是 0.99 -
backface-visibility: hidden单独写就能升层，和是否用 3D 无关；filter: blur(0)同样强制合成，参数“无效果”也不行 - 真要用 3D 动画，就把文字从变换容器里移出来：给文字父元素加
transform: translateZ(0)，再给子元素transform: none，防止被拖进同一合成层
viewport 缩放失控才是最隐蔽的模糊源
真机上文字发虚，有时根本不是 CSS 问题，而是页面被意外缩放了。iOS Safari 默认允许双指缩放，如果用户手动放大过，或者 <meta name="viewport"> 写错（比如漏了 initial-scale=1 或写了 user-scalable=yes），就会让 CSS 像素和物理像素失配，字体自然糊。
- 必须写全 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - 测试时先双指捏合/张开一次，再刷新页面——很多模糊只在缩放后复现
- 不要依赖
transform: scale()控制字号大小，它会放大 GPU 插值误差；字号变化用font-size+line-height组合更稳
复杂点在于：模糊往往由多个因素叠加触发，比如一个 opacity: 0.99 + font-size: 14px + 错误的 viewport，三者单独看都不致命，合起来就糊得没法用。调试时优先打开 Chrome DevTools 的 Layers 面板，确认文字是否进了 Composited 图层——没进，说明问题不在 GPU 渲染；进了，就别再调 -webkit-font-smoothing，直接砍掉触发合成的属性。
