iOS WebView中HTML5页面字体发虚发灰的根本原因是WebKit默认禁用次像素抗锯齿并降级字体平滑，以优先保障性能与功耗；有效解法是组合使用-webkit-font-smoothing: antialiased、text-rendering: optimizeLegibility和-webkit-text-stroke: 0.2px transparent，并配合正确viewport、合成层强制及系统设置规避。
为什么 iOS WebView 里 HTML5 页面字体发虚、发灰
根本原因是 iOS WebKit 默认对 或小字号文本启用「字体抗锯齿弱化」（subpixel antialiasing disabled）+ 「字体平滑降级」，尤其在非 Retina 屏模拟器、低亮度环境、或启用了「降低白点值」辅助功能时更明显。这不是 bug，是 WebKit 的渲染策略：优先保性能和功耗，牺牲部分文字锐度。
-webkit-font-smoothing 的实际效果与陷阱
很多人加 body { -webkit-font-smoothing: antialiased; } 就以为完事了，但实际效果取决于字号、颜色对比度和父容器是否触发硬件加速：
-
antialiased：只对灰色/浅色文字有效，黑字反而更糊（因去掉了次像素渲染） -
subpixel-antialiased：iOS 15.4+ 在大多数场景下已被禁用，设了也无效 -
none：强制关闭平滑，小字号直接锯齿，不推荐
真正有效的写法是组合使用：
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-text-stroke: 0.2px transparent;
}
其中 -webkit-text-stroke 是关键——极细透明描边能“撑开”字形边缘，让浏览器重新激活高质量光栅化。
立即学习“前端免费学习笔记（深入）”；
必须配合的 viewport 与 CSS 渲染层控制
单靠字体属性不够，iOS WebView 对缩放和合成层敏感：
- 确保
中不含shrink-to-fit=yes（已废弃且干扰渲染） - 给文本容器加
transform: translateZ(0);或will-change: transform;，强制创建独立合成层，避免字体被模糊的 backdrop blur 或半透明 overlay 污染 - 避免在文字父元素上设
opacity: 0.99类似值——iOS 会降级为 CPU 渲染，字体立刻变灰
真机调试时容易忽略的系统级干扰
字体模糊常不是代码问题，而是被系统设置静默覆盖：
- 「显示与文字大小」→「更大字体」开启后，
rem基准被拉伸，但font-smoothing不自动适配，需用@media (-webkit-min-device-pixel-ratio: 2)单独调参 - 「辅助功能」→「降低白点值」或「智能反转」开启时，所有 Web 内容字体自动应用软边处理，无 CSS 可绕过，只能检测并提示用户
- UIWebView 已废弃，务必确认用的是
WKWebView；旧项目若仍用UIWebView，字体模糊是必然现象，无法修复
最稳妥的验证方式：用 Safari 技术预览连真机，在「Rendering」面板中勾选「Show paint rectangles」，看文字区域是否单独成层、有无意外的模糊矩形覆盖。
