图标在高DPI屏幕发虚的根本原因是字体引擎对小字号非整数缩放的抗锯齿处理不一致，尤其受macOS与Windows渲染差异影响；实操应避免font-size缩放、改用transform缩放、重置图标font-size继承、SVG中显式声明currentColor、iOS下启用硬件加速并避免错误字体平滑设置。
图标在高DPI屏幕发虚、边缘模糊
根本原因是图标字体（如 Font Awesome、Iconfont）本质是矢量轮廓，但浏览器渲染时会按设备像素比（window.devicePixelRatio）做缩放，而字体引擎对小字号+非整数缩放的抗锯齿处理不一致，尤其在 macOS 和 Windows 的 ClearType/Subpixel AA 差异下更明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
font-size直接缩放到小于 16px —— 多数图标字体在14px及以下会主动关闭 hinting，导致轮廓失真 - 改用
transform: scale(0.8)配合transform-origin: center缩放，绕过字体光栅化阶段，由 GPU 渲染，保边更锐利 - 对关键图标（如按钮内图标），加
text-rendering: optimizeLegibility，强制启用高级字形替换和间距调整
CSS中icon-font尺寸随父元素font-size意外变化
图标字体本质是字符，继承 font-size；一旦父容器设了 font-size: 1.2rem，所有 ::before 伪元素里的图标也会被放大，且无法用 em 精确反向抵消（因 rem/em 计算链复杂）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图标类名统一用
icon-xxx，并在全局重置：.icon-xxx::before { font-size: 1em !important; } - 改用
width/height+line-height控制尺寸，而非依赖font-size—— 把图标当“行内块”处理更可控 - 若必须响应式缩放，用 CSS 自定义属性：
--icon-size: 1.5rem，再通过font-size: var(--icon-size)设置，方便 JS 动态调整
SVG Sprite 替代 icon-font 后，currentColor 失效
用 <use href="#icon-home"></use> 引入 SVG 图标时，currentColor 默认继承的是 <use></use> 元素自身的 color，而不是其父容器的 color —— 因为 <use></use> 是影子 DOM 行为，样式作用域被隔离。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
<symbol></symbol>定义里显式写fill="currentColor"或stroke="currentColor"，而不是依赖继承 - 避免在
<use></use>上直接设color，应设在包裹它的<span></span>或<i></i>上，并确保该元素有明确的color值（不能是inherit或未声明） - 若需多色图标，别用
currentColor，改用 CSS 变量：fill: var(--icon-primary, #333)，再通过父级设置style="--icon-primary: red"
移动端 Safari 下图标缩放后出现 1px 锯齿或偏移
iOS Safari 对 subpixel rendering 极其敏感，transform: scale(1.2) 若出发点不是整数像素位置（比如父容器有 margin: 0.5px），就会让图层合成时产生半像素采样，表现为毛边或左右晃动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图标容器加
backface-visibility: hidden或will-change: transform，强制创建独立图层，减少合成抖动 - 缩放前先用
translateZ(0)触发硬件加速，再叠加scale()，顺序不能反 - 检查是否启用了
-webkit-font-smoothing: antialiased—— 在 iOS 上它反而会让图标字体更糊，建议删掉或设为subpixel-antialiased
最麻烦的其实是设计稿给的「2x」图标尺寸，在 CSS 里硬套 background-size: 50% 拉伸位图图标——这种做法在 DPR=3 的 iPhone 15 Pro 上必然糊。真正要响应的不是“两倍图”，而是设备像素比本身，得靠 JS 读 window.devicePixelRatio 动态切资源或调整缩放基准。
