size-adjust 不能解决浏览器缩放导致的字体错位，因为它仅在 font-display: swap 的回退替换阶段生效，用于补偿不同字体的度量差异，而非响应用户缩放或系统字体放大。
size-adjust 为什么不能解决浏览器缩放导致的字体错位
它根本不是为缩放设计的。size-adjust 只在 font-display: swap 触发的「回退→替换」阶段起作用，针对的是字体度量差异（比如 Inter 和 system-ui 的 x-height 不同），而不是用户主动缩放页面或系统字体放大后的渲染重排。
当你按 Ctrl/Cmd + 或开启系统「更大字体」设置时，浏览器会整体拉伸 CSS 像素，此时所有字体、行高、间距都按比例放大——size-adjust 完全不参与这个过程，它连解析都不会被触发。
- 缩放时，
size-adjust的百分比值不会被重新计算，它只在初始回退渲染时用一次 - 哪怕你设了
size-adjust: 103%，在 150% 缩放下，它仍按原始尺寸映射，毫无补偿效果 - Chrome/Safari 对缩放的处理逻辑不同（Chrome 联动 DPI，Safari 保 CSS 像素），
size-adjust对这种差异也无感知
真正影响缩放下字体表现的是 text-size-adjust 和 root font-size
缩放行为由 text-size-adjust 控制是否允许干预，而最终视觉尺寸由根元素 font-size 是否尊重用户设置决定。
-
text-size-adjust: none会彻底禁用用户缩放，不可取；推荐用text-size-adjust: 100%，既防自动重排又保留可访问性 -
html { font-size: 100% }是底线——写死16px或62.5%会切断与系统缩放的关联，导致缩放后文字模糊或大小异常 - 如需响应式兜底，用
font-size: clamp(1rem, 0.5vw + 1rem, 1.25rem)，其中1rem必须基于未锁定的根字号才有效
缩放 + 自定义字体组合下的实际抖动来源
你以为是字体加载抖动，其实很多红框来自缩放本身：当用户启用「粗体文本」或「更大字体」时，系统字体链（如 "SF Pro Text", system-ui）的度量会突变，而你的自定义字体没做对应适配。
- 测试时别只看
font-display: swap阶段，要开系统设置里的「辅助功能→显示→更大文字」再硬刷 - 如果用了
line-height: 1.5这类显式值，它会覆盖size-adjust对行高的预留，同时在缩放下变成固定倍数，加剧错位 - Firefox 完全不支持
size-adjust，但它的缩放行为更保守；Chromium 下缩放+swap+size-adjust 组合反而可能因双重干预（缩放 + 度量调整）引发意外偏移
能做的只有分层控制，没有统一补偿方案
目前没有 CSS 属性能动态修正「缩放 × 字体度量 × 回退链」三者叠加的效果。你只能拆解问题、分别应对：
- 对字体加载抖动：用
size-adjust+font-display: swap，仅限 Chromium/Safari 17.4+ - 对用户缩放干扰：靠
text-size-adjust: 100%+html { font-size: 100% }保基础链路 - 对系统辅助设置兼容：避免硬写
px行高，改用无单位line-height: 1.4，让其随缩放自然缩放 - 真要兜底检测：JS 里查
window.visualViewport.scale或matchMedia('(min-resolution: 1.5dppx)')，但无法反向修正size-adjust
最易被忽略的是：你在 DevTools 里调 size-adjust 时禁用的是字体，不是缩放——这两件事完全不在同一层。调完值再开系统放大，看到的抖动跟 size-adjust 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
