字体模糊根本原因是transform使元素进入GPU合成层，非整数像素值触发双线性插值；解决关键是确保位移、缩放、旋转值均为整数，如用Math.round()处理JS计算值、避免translate(50%,-50%)等百分比居中、优先采用整数scale或rotate角度。
直接说结论：字体模糊极少是单一 CSS 属性能“一键修复”的，真正有效的做法是先定位模糊类型（transform 引发？filter 继承？高 DPI 渲染策略？），再针对性切断问题链——比如让文字不进合成层、不让它被缩放重采样、或换掉错误的字体 fallback。
为什么 transform 会让文字变糊，且改了值也不见好
根本不是 transform 本身写错了，而是浏览器在应用 translate、scale 或 rotate 后，强制把文字对齐到整数像素坐标，丢掉了亚像素渲染所需的 RGB 分通道微调能力。尤其当计算结果带小数（比如 translateX(50%) 在宽 199px 的容器里算出 99.5px）时，糊感最明显。
- 别用
transform: scale(0.8)做响应式缩放——它会让已渲染文本被 GPU 二次插值，彻底失真 - 避免任何含小数的位移：
translateX(0.5px)、translateY(1.2px)都会触发模糊 -
transform-style: preserve-3d不解决问题，反而可能让文字卷入多层 GPU 合成，糊得更隐蔽 - 居中常用写法
top: 50%; left: 50%; transform: translate(-50%, -50%)在奇数尺寸容器下极易出问题
为什么加了 -webkit-font-smoothing: antialiased 反而更糊
这个属性在 macOS 上会强制关闭子像素抗锯齿，中文字体立刻发虚、灰边、对比度下降。它只对 macOS Safari/Chrome 有效，iOS Safari 完全忽略，Windows 和 Linux 更不受影响——写了等于白写，还可能帮倒忙。
- 默认值
subpixel-antialiased才是 macOS 清晰渲染的前提，不要覆盖 - 真正该配的是
text-rendering: optimizeLegibility+-moz-osx-font-smoothing: grayscale（仅限 Firefox on macOS） - 如果用了自定义字体，
font-display: swap比任何 smoothing 属性都关键——FOUT 期间用位图字体撑开，回填时重绘失真才是糊的源头 -
font-familyfallback 顺序错也会糊：中文字体必须前置，例如"PingFang SC", "Hiragino Sans GB", sans-serif，不能把英文字体放前面
怎么绕过 filter: blur() 导致的文字继承性模糊
filter 一加，整个元素树都会被送进 GPU 合成管线，文字哪怕没动，也会被双线性插值“柔化”边缘。Chrome/Edge 尤其明显，Firefox 相对稳，Safari 则叠加系统字体限制，灰边+虚影齐飞。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要给父容器设
filter: blur(6px)然后把文字放里面——这是最常见也最致命的错误 - 正确做法：把模糊背景和文字拆成两个独立 DOM 节点，文字节点不继承任何
filter - 实在无法改结构，可对文字加
backface-visibility: hidden（部分 Chrome 版本能重置光栅化上下文） - 静态模糊场景下，
will-change: filter完全没必要，加了反而多一次无效合成；只在 JS 动画前一刻设置，动画结束立即设为auto
移动端 Safari 和高分屏的特殊处理点
iOS Safari 对 filter、transform、字体加载策略都更敏感，且不支持很多 desktop 端的兜底方案。高分屏（Retina/4K）下模糊本质是过度平滑，但强行关 smoothing 又会牺牲可读性。
- 必须确保
<meta name="viewport" content="width=device-width, initial-scale=1.0">存在且未被 JS 覆盖 - 用
font-size: clamp(14px, 2.5vw, 18px)替代transform: scale()，让字号由浏览器原生计算，不触发重采样 - 避免
transform: translateZ(0)或will-change: transform加在文字容器上——这会强制创建合成层，改变渲染上下文 - 极端兼容需求下，可用
text-shadow降级：color: transparent; text-shadow: 0 0 2px rgba(0,0,0,0.2)，完全避开合成层，IE9 都支持
复杂点在于：你看到的“糊”，往往是 viewport 缩放 + font-display 配置不当 + fallback 字体错序 + transform 小数位移 四者叠加的结果。单改一个属性，大概率没用；得打开 Chrome DevTools 的 Layers 面板，确认文字是否被标红（即已升层），再一层层往回查触发点。
