移动端H5字体模糊主因是-webkit-font-smoothing默认值在iOS/Android系统间不一致，尤其深色背景+小字号+系统字体组合下易发虚；应全局设置antialiased以强制灰度抗锯齿提升锐度。
移动端H5页面字体模糊，不是图片没做2x，也不是viewport写错了，而是系统级字体渲染策略在作怪——-webkit-font-smoothing 默认值在不同iOS/Android版本下不一致，尤其在深色背景、小字号、非衬线字体（如"-apple-system", "Helvetica Neue"）组合下，文字边缘发虚、锯齿感强，肉眼明显可辨。
为什么-webkit-font-smoothing会影响H5字体清晰度
iOS和部分Android WebView使用Core Text或Skia引擎渲染文本，-webkit-font-smoothing 控制的是亚像素抗锯齿（subpixel antialiasing）是否启用。默认值为 auto，但实际行为受系统设置、字体族、背景对比度共同影响：比如深色背景+浅色文字时，auto 可能退化为灰度抗锯齿，导致字形“发毛”；而 antialiased 强制关闭亚像素，反而更锐利。
-
subpixel-antialiased：默认且最平滑，但依赖RGB子像素排列，在OLED屏或高缩放比下易糊 -
antialiased：仅用灰度抗锯齿，边缘硬朗，适合小字号、高对比场景 -
none：完全关闭抗锯齿，仅限极特殊需求（如像素风），多数情况文字生硬难读
哪些CSS选择器必须加-webkit-font-smoothing
不能只给 body 或 html 设，因为字体继承链中任意一层覆盖了 font-family 或 font-size，就可能重置渲染策略。重点覆盖以下三类：
- 所有带
font-family声明的元素，尤其是button、input、select—— 它们自带UA样式，常触发独立渲染上下文 - 使用系统字体栈的容器，例如
.header、.btn、[role="button"] - 深色模式下显式设了
color和background-color的文字块（哪怕只是临时加class）
推荐写法：
body, button, input, select, textarea, .text, [role="button"] {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}注意 -moz-osx-font-smoothing 是macOS Safari专属，对iOS无效，但加了无害；而 grayscale 在macOS上效果等同于 antialiased，iOS忽略该值。
-webkit-font-smoothing: antialiased 的副作用与规避
开启 antialiased 后，部分字体（尤其是苹方-简、SF Pro）在14px以下可能出现笔画粘连或字重变细，这不是bug，是灰度抗锯齿的固有特性。
立即学习“前端免费学习笔记（深入）”；
- 若设计稿要求12px按钮文字，建议改用13px或14px，并配合
line-height: 1控制垂直居中 - 避免在
transform: scale(0.9)元素内套用该属性，缩放会放大灰度模糊感 - 不要和
text-rendering: optimizeLegibility同时使用，后者会强制启用更复杂的字距调整，反而加剧渲染负担
真要保12px又不想糊？换字体：font-family: "PingFang SC", "Helvetica Neue", sans-serif; 比纯 "-apple-system" 更稳定。
为什么不用JavaScript动态检测并设置
有人想用 navigator.platform 或 matchMedia("(prefers-color-scheme: dark)") 来条件加载该样式，没必要。原因很实在：
-
-webkit-font-smoothing是CSSOM属性，浏览器解析CSS时立即生效，JS注入样式表存在毫秒级延迟，首屏文字已按默认策略渲染完毕 - 它不响应媒体查询变化，改系统深色模式不会重绘文字，所以JS监听也无效
- 所有现代iOS/iPadOS/主流Android WebView均支持该属性，无需兼容降级
真正该用JS干预的，是根字体大小（html 的 font-size）——那个才影响rem换算和布局重排。字体渲染这事，交给CSS一次性写死最稳。
