最稳解法是直接改font-size而非用transform:scale()，因后者触发gpu合成层导致双线性插值模糊；必须用scale时需确保缩放后为整数像素、容器宽高为偶数、父容器加isolation:isolate防干扰。
直接改 font-size，别依赖 transform: scale() 做文字缩放——这是最稳的解法。浏览器对 scale() 的 GPU 插值处理无法保证像素对齐，模糊是必然结果，不是“调个参数就能修好”的问题。
为什么 transform: scale() 会让文字变糊
根本不是缩放本身的问题，而是它触发了合成层，把文字渲染成 GPU 纹理后做双线性插值。只要缩放比不是整数（比如 scale(1.2)），GPU 就得在像素之间“猜”颜色，边缘立刻发虚。你看到的“动起来流畅”，和“字清晰”是两回事，性能换来的往往是渲染降级。
-
scale(1.25)得到 20px（原 16px）→ 可能勉强接受；scale(1.23)→ 必糊 - 高 DPR 屏幕（如 MacBook Retina、iPhone）上问题更明显，因为物理像素密度高，插值误差被放大
-
will-change: transform或translateZ(0)单独加，既不修复像素对齐，还可能让图层嵌套更深、内存飙升
响应式中真正可控的缩放方案
绕开 GPU 插值，靠 CSS 原生字体渲染机制保质量：
- 用
font-size+em/rem配合媒体查询，例如：@media (min-width: 768px) { .title { font-size: 1.5rem; } } - 必须用
scale()？确保缩放后计算出的像素值是整数：原font-size: 14px，就只配scale(1.42857)（≈20px），而不是拍脑袋写scale(1.4) - 容器宽高也得是偶数：避免
width: 99px; transform: translateX(50%)→ 实际位移 49.5px，触发子像素渲染 - 对父容器加
isolation: isolate，防止它意外创建合成层，干扰子元素文字渲染
SVG 图标缩放模糊怎么破
不是所有 SVG 都“天生矢量”，糊是因为被当位图用了：
- 别用
<img src="icon.svg">→ 浏览器会光栅化再缩放 - 别用
background-image: url(icon.svg)→ 同样走位图路径，尤其background-size放大时 - 正确做法：内联 SVG，删掉原始
width/height属性，只留viewBox，例如：<svg viewbox="0 0 24 24"><path d="..."></path></svg> - 控制大小用
font-size或max-width，配合vertical-align: middle对齐文字
真正难的不是写出“能动”的代码，而是让动起来的时候字还清楚——这取决于你是否愿意放弃一点动画帧率，换来确定的渲染结果。缩放值算不准、容器尺寸没对齐、SVG 没删 width/height，这三个点踩中任意一个，模糊就躲不掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
