CSS变量本身不导致字体图标模糊，真正原因是其参与计算后生成非整数transform值（如translate(0.3px)或scale(1.07)），触发浏览器子像素插值，使边缘发虚；需检查computed样式中transform矩阵是否含小数，避免calc()引入浮点误差，优先用font-size或SVG替代。
CSS变量本身不会导致字体图标模糊，真正触发模糊的是变量参与计算后生成的非整数 transform 值（如 translate(0.3px) 或 scale(1.07)），浏览器在子像素渲染时被迫插值，文字和图标边缘就发虚了。
检查 transform 变量是否产出小数像素位移
字体图标常被包裹在 inline-block 或 flex 容器中，用 transform 做微调对齐。一旦变量代入后结果含小数，比如 --offset: 0.5; + transform: translateX(calc(var(--offset) * 1px));，就会直接命中模糊雷区。
- 打开 DevTools → Elements 面板，定位到图标元素，展开其 computed 样式，搜索
transform，看最终解析出的矩阵或函数值里有没有.x小数（如matrix(1, 0, 0, 1, 12.3, 0)） - 避免用
calc()对变量做任意乘除：例如calc(var(--scale) * 1px)中若--scale是1.2，结果就是1.2px—— 这比直接写死更危险，因为变量值可能来自 JS 动态注入 - 如需响应式偏移，改用
em或rem单位配合整数缩放，或用clamp(0px, 2vw, 8px)并确保视口宽度变化时输出为整数像素（可通过 JS 监听resize打印验证）
为什么 scale 变量比 translate 更容易糊图标
字体图标本质是矢量字形，scale() 会迫使浏览器将其光栅化为纹理再缩放，GPU 插值算法（如双线性滤波）会抹平边缘细节；而 translate() 若为整数像素，仅移动位置不重采样。
-
scale(calc(var(--ratio)))中只要--ratio不是整数（哪怕1.001），就大概率触发模糊 —— 尤其在 macOS Chrome 和部分 Android WebView 上 - 图标容器若同时有
backface-visibility: hidden或perspective，会强化合成层降质渲染，让模糊更明显 - 替代方案：用
font-size控制图标大小（前提是字体文件支持多尺寸 hinting），或用 SVG 替代字体图标 —— 后者缩放无损，且可直接用 CSS 变量控制width/height
如何安全地用变量驱动 transform 动画
动画中变量波动更易暴露小数问题，尤其 scale 或 rotate 的 easing 过程中帧间值极难保证整数。
立即学习“前端免费学习笔记（深入）”；
- 禁用
will-change: transform：它会提前创建合成层，反而锁定低质量渲染路径；只在真正需要硬件加速的长动画开头加，且动画结束立即移除 - 对图标类元素，优先用
transform: translateZ(0)+opacity实现“入场感”，避开scale；必须缩放时，限定为scale(1.02)且动画时长 ≤ 120ms（≤ 7 帧），减少模糊感知时间 - 若变量来自 JS（如监听滚动计算缩放比），在赋值前强制取整：
el.style.setProperty('--scale', Math.round(ratio * 100) / 100);，避免浮点误差累积
最隐蔽的坑是：你以为变量只是个“配置项”，但它一旦参与 calc() 或 JS 计算，就可能把整数输入变成小数输出——而字体图标对这种亚像素偏移极度敏感。检查 computed transform 值，比调 -webkit-font-smoothing 管用十倍。
