文字跳动源于字体加载引发的行高重排，因后备字体与web字体度量差异导致；需结合font-size-adjust、预加载+font-display: optional及min-height兜底三策协同解决。
文字跳动是因为字体加载导致的行高重排
浏览器默认会先用系统后备字体渲染文字，等自定义字体（比如 @font-face 加载完成）再重绘——如果两种字体的line-height计算结果不同，行高就会突变，造成视觉跳动。这不是 bug，是浏览器的正常行为。
- 常见错误现象：
font-display: swap开启后首屏文字“闪一下”、段落突然上移或下移 - 关键原因：后备字体与 Web 字体的
cap-height、ascender/descender不一致，导致相同font-size下实际行高不同 - 不能只靠
line-height: 1.5硬设——它只是倍数，最终像素值仍随字体度量变化而浮动
用 font-size-adjust + line-height 配合控制基线稳定性
font-size-adjust 是被严重低估的 CSS 属性，它通过保持ex或ch单位的视觉比例，间接稳定行高。配合固定line-height值（如line-height: 1.6em），能大幅削弱跳动。
- 推荐写法：
font-size-adjust: 0.5;（根据字体aspect-value调整，思源黑体约 0.52，Inter 约 0.58） - 必须搭配
line-height用em或rem单位，避免使用无单位数值（如1.6），否则在字体切换时仍可能波动 - 注意兼容性：
font-size-adjust在 Safari 17+ 和 Chrome 119+ 才完全支持，旧版需降级 fallback
预加载关键字体 + font-display: optional 避免阻塞与闪烁权衡
font-display: swap 虽解决 FOIT（Flash of Invisible Text），但加剧 FOUT（Flash of Unstyled Text）跳动；block 又导致空白等待。折中方案是用optional + preload，让字体尽可能早加载，又不阻塞渲染。
- 在
中加：<link rel="preload" as="font" href="inter-var-latin.woff2" type="font/woff2" crossorigin> - CSS 中声明：
@font-face { font-family: 'Inter'; src: url('inter-var-latin.woff2') format('woff2'); font-display: optional; } -
optional意味着：若字体 3s 内未就绪，浏览器直接用后备字体，且不再重试——这反而消除了“等一会儿再跳”的不确定性 - 注意：必须加
crossorigin属性，否则预加载失效；WOFF2 格式优先，体积小、兼容好
用 clamp() + min-height 容器兜底防布局塌陷
即使做了上述优化，极端网络条件下字体仍可能延迟加载。此时可对文字容器设置最小高度，用clamp()动态约束，防止内容区域突然收缩或拉伸。
- 示例：
min-height: clamp(1.4em, 4vh, 2.2em);—— 给行高一个弹性但有边界的缓冲区间 - 不要只设
height，会截断内容；min-height更安全 - 对多行文本块（如卡片标题+摘要），建议包裹在
div中统一设min-height，比逐个元素处理更可控 - 慎用
overflow: hidden掩盖跳动——这只是视觉遮掩，实际布局抖动仍在，影响可访问性和打印样式
最麻烦的其实是字体度量本身不可控：不同厂商对同一字重的 ascender 设计差异可能达 10%。所以别指望一次 CSS 解决所有跳动，得把font-size-adjust、预加载、容器兜底三者串起来用，漏掉任意一环都容易在某个设备上重现跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
