直接改 font-size 最稳妥，zoom 和 transform: scale() 会导致字体模糊发灰，因破坏亚像素渲染；应优先用 rem、clamp 或媒体查询动态调整字号。
用 font-size 调文字大小，别碰 zoom 或 transform: scale()
直接改 font-size 是最稳妥的方式。CSS 中设置 font-size: 16px、font-size: 1.2rem 或 font-size: clamp(14px, 1.1vw, 18px) 都能生效，浏览器会按标准渲染字体轮廓和抗锯齿。而用 zoom（非标准）、transform: scale() 或 scale() 会让整个元素被“拉伸”，导致字体边缘模糊、颜色发灰——这不是颜色失真，是像素重采样造成的视觉劣化。
-
zoom在 Firefox 中完全不支持，Chrome 已标记为废弃 -
transform: scale(1.2)会触发硬件加速，但字体不再走文本渲染管线，而是当位图处理 - 如果必须缩放整块内容（比如响应式仪表盘），优先用
viewport缩放或 CSScontainer query+font-size动态调整
颜色失真其实是亚像素渲染被破坏，换字体或关 font-smooth 可能没用
所谓“调大文字后颜色变灰/发虚”，本质是系统级亚像素抗锯齿（如 Windows 的 ClearType）在非整数缩放或非标准 DPI 下失效。浏览器此时可能回退到灰度抗锯齿，文字边缘出现半透明像素，叠加在背景色上就显得“颜色不对”。这不是 CSS 颜色值变了，是渲染路径变了。
- 检查是否启用了
font-smooth: never或-webkit-font-smoothing: none—— 这些会强制关闭平滑，让文字发硬、发虚 - 换用无衬线字体如
"Segoe UI", "Helvetica Neue", sans-serif，它们对亚像素渲染更友好 - 避免在
body上设transform或filter（如blur()、drop-shadow()），这些会禁用子元素的文本优化渲染
高 DPI 屏幕下文字发虚？加 image-rendering: -webkit-optimize-contrast 没用，该看 devicePixelRatio
在 200% 缩放的 Windows 或 macOS Retina 屏上，若文字仍显糊，问题往往出在页面未声明响应式视口，或字体单位混用导致计算误差。浏览器根据 window.devicePixelRatio 决定如何映射 CSS 像素到物理像素，但前提是它知道你“想适配”。
- 确保
存在且没被 JS 覆盖 - 避免用
px固定字号做响应式，改用rem+ 根字体动态调整：document.documentElement.style.fontSize = `${16 * window.devicePixelRatio}px`不推荐，应依赖 CSS 媒体查询 - Chrome DevTools → Rendering 面板勾选 “Paint flashing” 和 “Layer borders”，看文字是否意外进入了合成层（
will-change: transform等引发），这也会绕过文本渲染器
调试时别只看 DevTools 的 computed color，要开“Rendering”面板看实际渲染效果
DevTools 显示 color: #333 正常，不代表屏幕上就是纯 #333。亚像素渲染会让单个字符笔画边缘出现 RGB 分色条纹（尤其在 LCD 上），这是正常现象；但如果整段文字泛灰、对比度下降，说明渲染上下文异常。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → ⚙️ Settings → Preferences → Advanced → 勾选 “Enable paint profiler” 和 “Show rendering stats”
- 按
Shift + F12打开 Rendering 面板 → 勾选 “FPS meter” 和 “Layer borders”，观察文字是否被包裹进独立 compositor layer - 临时加一行
* { text-rendering: optimizeLegibility !important; }测试，但上线前务必移除——它可能加重重排
真正卡住人的，往往是把“字体变大”和“元素放大”当成一回事，又在没搞清渲染管线的情况下乱加 transform 或 filter。文字大小和文字清晰度，本质上是两个不同层级的问题。
