size-adjust不能用于IconFont，因其仅作用于@font-face块内调整字体度量，且Chrome 122+仅部分支持，Firefox/Safari完全不支持；写在.icon类中无效，无法控制图标显示大小或响应式缩放。
为什么 size-adjust 不能用于 IconFont
直接说结论：size-adjust 是 CSS Fonts Level 4 中用于调整**字体度量（font metrics）** 的属性，仅作用于 @font-face 块内，且目前（截至 2024 年中）**Chrome 122+ 仅部分支持，Firefox / Safari 完全不支持**。它不控制图标显示大小，也不能响应式缩放 IconFont 图标——把它写在 .icon 类里完全无效。
常见误用场景：开发者看到文档里有 “adjust font size” 字样，就尝试这样写：
@font-face {
font-family: "iconfont";
src: url("iconfont.woff2");
size-adjust: 80%; /* ❌ 无效果，且多数浏览器忽略 */
}结果是图标该模糊还是模糊，该溢出还是溢出，和没写一样。
IconFont 在移动端真正可靠的缩放方式
IconFont 本质是文字，所以适配核心逻辑是：**让图标随文本流自然缩放，同时确保基线对齐、宽高一致、不被行高挤压**。
立即学习“前端免费学习笔记（深入）”；
- 统一用
em或rem设置font-size，避免固定px - 强制重置
line-height: 1，防止父容器行高干扰图标高度 - 用
vertical-align: middle或-0.125em微调基线（不同字体差异大） - 配合媒体查询或 clamp() 控制尺寸范围，例如：
font-size: clamp(16px, 4vw, 24px)
示例：
.icon {
font-family: "iconfont";
font-size: 1.2rem;
line-height: 1;
vertical-align: -0.125em;
}
<p>@media (max-width: 480px) {
.icon { font-size: 1rem; }
}比 size-adjust 更值得优先检查的三个问题
很多“图标在 iPhone 上变小/错位/锯齿”的问题，其实和字体缩放无关，而是底层渲染细节没处理好：
-
font-display: swap缺失 → 首屏图标闪动或空白，尤其在弱网下 - WOFF2 文件未启用 Brotli 压缩 → 移动端加载慢，图标延迟渲染
- 字体未声明
unicode-range→ 浏览器下载整包字体，但只用其中几个码点，浪费带宽
推荐 @font-face 写法：
@font-face {
font-family: "iconfont";
src: url("iconfont.woff2") format("woff2");
font-display: swap;
unicode-range: U+E600-E6FF; /* 限定只加载你实际用的图标范围 */
}当真需要精细控制图标度量时，替代方案是什么
如果你在做设计系统级图标库，且必须统一不同字体来源图标的上下间距、x-height 表现，size-adjust 不现实，可考虑：
- 用 SVG Sprite 替代 IconFont：每个图标是独立
<svg>，尺寸、颜色、响应式由 CSS 直接控制，无字体渲染不确定性 - 构建时用工具（如
iconfont-cli或svg-sprite-loader）生成带 viewBox 和标准化尺寸的 SVG 雪碧图 - 若坚持用字体，改用
transform: scale()+transform-origin微调，但注意会触发重排，慎用于列表项
真正影响移动端图标体验的，从来不是某个冷门 CSS 属性是否生效，而是字体加载策略、单位选择、基线对齐这三处是否稳。
