根本原因是字体度量失配导致亚像素渲染，需从字体加载、单位选择和缩放触发方式三处优化；vw 实时浮点计算易使字号落在非整数像素，触发插值抗锯齿而模糊。
纯用 vw 做响应式字体，文字在缩放时模糊，根本原因不是渲染引擎问题，而是字体度量失配——font-size-adjust 能缓解，但不能根治；真正要防模糊，得从字体加载、单位选择和缩放触发方式三处下手。
为什么 vw 字体在缩放时容易发虚
浏览器对 vw 的计算是实时浮点运算（比如 4.372vw），最终映射到像素网格时若未对齐，就会触发亚像素渲染。中文字体尤其敏感：没有 hinting 信息、字重变化大、笔画密度高，一旦字号落在非整数像素（如 19.83px），ClearType 或 macOS Quartz 就会插值抗锯齿，造成视觉模糊。
这不是 bug，是 CSS 视口单位与光栅化渲染的天然张力。你看到的“缩放模糊”，大概率发生在用户手动缩放页面（Ctrl + / Cmd +）或系统级缩放（Windows 125% DPI）时，vw 值被二次计算，加剧了像素错位。
font-size-adjust 能做什么、不能做什么
font-size-adjust 的作用是维持 x-height 一致，防止换字体时行高突变，它不控制像素对齐，也不干预缩放渲染流程。设成 font-size-adjust: 0.5; 不会让文字变锐利，只是告诉浏览器：“请按这个比例调整字号，让小写字母 x 的高度尽量稳定”。
- 它只在多字体回退链中生效（例如
font-family: "Inter", "PingFang SC", sans-serif;） - 对单字体、尤其是 WebFont，效果微弱甚至不可见
- 无法解决
vw导致的亚像素问题，更不处理系统 DPI 缩放
真正防模糊的实操要点
模糊是结果，根源在“非整数像素 + 字体度量抖动 + 渲染策略不匹配”。以下措施可显著降低发生概率：
- 避免用
vw直接驱动正文：p、li、button等应优先用rem+ 根字号媒体查询，仅标题类（h1–h3）用clamp(1.25rem, 4vw, 3rem) - 给关键文本容器加
will-change: transform;（慎用，仅限高频缩放区域），提示浏览器升格为独立图层，减少重绘抖动 - WebFont 必须声明
font-display: swap;，并配合<link rel="preload">，避免 FOIT/FOUT 引发的二次 layout 和字体重排模糊 - 禁用
text-rendering: optimizeLegibility;（Safari 旧版曾因此放大模糊），现代浏览器默认行为已足够
替代方案：用 vmin 或 clamp() 配合固定阶梯
比起无约束的 vw，vmin 更稳妥——它取宽高较小值，防竖屏手机字号爆炸；而 clamp() 内嵌整数基准，能自然卡住常见设备像素比：
h1 {
font-size: clamp(1.125rem, 8vmin, 3.5rem);
}
这段代码在 iPhone 13（390×844）上算出约 31.2px，在 iPad Pro（1024×1366）横屏下约 81.9px，但因上下限存在，实际渲染更倾向整数像素区间。再配合 line-height: 1.3;（无单位）、letter-spacing: 0.01em; 微调，比强求 font-size-adjust 有效得多。
最易被忽略的一点：vw 模糊问题在 Retina 屏上反而不明显——因为物理像素密度高，亚像素误差被稀释。所以测试务必覆盖 Windows 100%/125%/150% DPI 设置，而非只看 Mac 或高端手机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
