文字发虚主因是transform缩放导致像素未对齐，引发子像素渲染失准；其次为Windows高缩放下DPI映射失配及iOS深色模式亚像素抗锯齿失效；应避免缩放含文字容器，改用rem/em响应式、强制字体抗锯齿或分层渲染。
transform缩放后文字发虚，是因为像素没对齐
用 transform: scale() 做整体缩放时，浏览器会把元素定位在非整数像素坐标上，比如 translate(0.3px, 0) 或 scale(0.87)，导致子像素渲染失准。文本不再落在物理像素格点上，抗锯齿算法被迫混合采样，结果就是边缘“毛”、笔画粘连、小字号糊成一片。
这不是字体本身问题，也不是DPR设置错误，而是CSS变换绕过了浏览器的常规布局对齐机制。尤其在Windows高缩放（125%/150%）+ Chrome组合下，模糊感最明显。
- 避免用
transform: scale()缩放含文字的容器，哪怕只是scale(0.99) - 如果必须缩放，强制回归整数像素：给元素加
will-change: transform+backface-visibility: hidden，部分Chrome版本能重置光栅化上下文 - 更稳妥的做法是改用
zoom（仅IE/Edge支持）或纯CSS响应式方案，而非transform
系统缩放下字体大小不变，页面却变小了
Windows系统缩放（如125%）本质是修改DPI映射，它会让CSS像素“变大”，但默认字号（16px）仍按原始逻辑计算，造成文字相对页面显得过大、挤占空间、换行错位。
典型表现是导航栏文字撑开容器、按钮内文字溢出、深色模式下文字与背景对比失衡——这些都不是媒体查询没写全，而是基础缩放适配缺失。
立即学习“前端免费学习笔记（深入）”；
- 优先使用相对单位：
rem或em替代固定px，并确保根字体大小随缩放动态调整 - 不要依赖
body { font-size: 16px }这类硬编码；改用html { font-size: 100% }，让浏览器按系统缩放自动推导 - 对关键文字容器（如
button,.title,[role="heading"]）显式设font-size: clamp(1rem, 4vw, 1.5rem)，兼顾小屏可读与大缩放不溢出
移动端H5深色背景+小字号文字发虚
iOS和部分Android WebView默认用 -webkit-font-smoothing: auto，但在深色背景上，auto会退化为亚像素抗锯齿（subpixel-antialiased），而OLED屏子像素排列不规则，导致文字边缘泛灰、发毛、细节丢失。
这不是高清图没切2x的问题，也不是viewport设置错误，是字体渲染策略与显示硬件不匹配。
- 全局加这条规则，覆盖所有可能触发独立渲染上下文的元素：
body, button, input, select, textarea, [role="button"], .text - 必须同时声明：
-webkit-font-smoothing: antialiased+-moz-osx-font-smoothing: grayscale - 注意副作用：12px以下苹方字体可能出现笔画变细或粘连，此时应升到13px或14px，并用
line-height: 1控制垂直居中
Swiper轮播或autofit.js缩放后文字糊成一团
这类工具内部多用 transform: matrix3d() 或 scale() 动态缩放整个容器，一旦容器里有文字，就继承模糊。Swiper在滑动瞬间触发重排，transform 值频繁微调，进一步加剧像素错位。
你看到的“重影”“变形”，其实是同一段文字被不同缩放比例反复光栅化，再叠加合成的结果。
- 绝对不要把文字节点放在被缩放的容器内部；拆分为两层：背景/容器用
transform缩放，文字用绝对定位 + 独立font-size控制 - 若用
autofit.js，在初始化后手动对文字区域执行element.style.transform = 'none'并重设font-size - 移动端Safari特别敏感，建议对文字加
text-rendering: optimizeLegibility，并确保viewport中包含width=device-width, initial-scale=1
真正难的不是加几行CSS，而是识别出“模糊”背后到底是transform错位、系统缩放失配、还是字体渲染策略冲突——三者修复路径完全不同，混用反而恶化问题。尤其要注意：transform 和 filter 同时存在时，模糊会指数级放大，这时候删掉其中一个，比调十个参数都管用。
