如何通过CSS使用em单位实现图标大小随页面字号自动调整？

本文共计888个文字，预计阅读时间需要4分钟。

许多同学发现，给设置字体大小后，当切换到处图标就会缩小成小点，这不是图标本身有问题，而是单位写死了。em是相对于当前元素字体大小的单位，是相对单位。它是作为关联元素（例如用:before或字体图标）的元素，其font-size会继承父级元素的字体大小，然后跟着伸缩。

• 别用 width: 16px; height: 16px 控制 SVG 或字体图标尺寸——这会切断响应链
• 改用 font-size: 1em（或 0.875em 等比例值），让图标尺寸始终是父文字的倍数
• 如果图标是 <svg></svg> 标签，记得加 height: 1em; width: 1em;，且移除 viewBox 外的固定宽高属性

字体图标（如 IconFont）用 em 后图标变模糊？检查 font-display 和渲染模式

用 em 缩放时，某些浏览器（尤其旧版 Chrome/Safari）会对小字号下的字体图标做亚像素渲染，导致边缘发虚。这不是单位问题，而是字体渲染策略没对齐。