真正可控的解法是切断字体加载对首屏布局的影响——靠 font-display: optional、子集化、preload 和显式尺寸约束四者缺一不可。
单独用 font-display: swap + Bootstrap 5 默认 CSS，会放大布局跳动，尤其在移动端。真正可控的解法是切断字体加载对首屏布局的影响——靠 font-display: optional、子集化、preload 和显式尺寸约束四者缺一不可。
为什么 Bootstrap 5 + Google Fonts 组合特别容易抖
Bootstrap 5 自带的 font-family 声明（如 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif）本身不抖，但一旦你引入 Google Fonts（比如 Inter 或 Roboto），问题就来了：
- Google Fonts 默认返回的是完整字体文件（≥500KB），中文字体甚至超 2MB，
swap模式下浏览器先用系统字体撑开空间，等 Web 字体就绪再替换——而系统字体和 Web 字体的line-height、字宽、x-height 差异极大 - Bootstrap 的
.btn、.h1等类依赖字体度量计算行高与 padding，字体切换后整个按钮高度突变，flex容器内图标错位、卡片高度重排 - Google Fonts 的
&display=swap参数只是给@font-face加font-display: swap，它不解决子集、预加载或容器尺寸约束，等于只开了门，没铺路
font-display: optional 不是设了就生效
optional 的逻辑是“100ms 内就绪才用，否则跳过”，但它对字体体积极其敏感：
- 完整
InterWOFF2 ≈ 600KB → 3G 下不可能 100ms 就绪 → 全部 fallback，等于白配 - 必须子集化到 ≤200KB：用 google-webfonts-helper 下载仅含 ASCII + 常用标点的子集，或用
pyftsubset手动裁剪 - 必须
preload：否则浏览器按默认优先级 fetch 字体，常排在图片、JS 后面，100ms 窗口根本等不到 -
crossorigin必须带上：<link rel="preload" href="https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTe6Za9I18w.woff2" as="font" type="font/woff2" crossorigin>，漏掉就无法被@font-face复用
Bootstrap 5 的字体声明要配合显式尺寸约束
即使字体加载策略到位，Bootstrap 的响应式文本类（如 .h1、.fs-5）仍可能因字体度量变化引发微小重排。防抖关键在容器层：
立即学习“前端免费学习笔记（深入）”；
- 对标题、按钮等关键文本容器，加
min-height或aspect-ratio锚定高度区间，例如：<h1 style="min-height: 1.4em;">标题</h1> - 避免用
line-height: 1.2这类无单位值——它依赖当前字体的 em 尺寸，字体切换时实际像素高度会变；改用line-height: 1.4（数字）更稳定 - 如果用了
text-wrap: balance（实验性），务必禁用：它会等字体就绪后重新切分换行，直接导致段落高度跳变
移动端还要额外处理滚动条宽度抖动
Bootstrap 5 模态框打开时会加 body.modal-open { overflow: hidden; }，隐藏滚动条导致页面向左跳——这和字体抖动叠加，视觉上更混乱：
- 别依赖 Bootstrap 自带的
bs-modal-scrollbar-measure类，它在 iOS Safari 15.4 之前无效 - 手动测滚动条宽度：
document.documentElement.clientWidth - document.body.clientWidth（比getScrollbarWidth()更准，且兼容 Safari） - 模态框 show 事件里设置：
document.body.style.paddingRight = `${scrollbarWidth}px`；hide 事件里清空，不能只靠 class 切换
真正稳的路径不是“让字体快点加载”，而是让布局彻底不依赖它——子集够小、preload 足够早、容器尺寸够硬、字体 fallback 足够平滑。任何一环松动，抖动就会回来。
