font-display: swap不能单独解决文字抖动，因其仅控制显示时机，未解决回退字体与自定义字体在x-height、line-height、字宽上的度量差异，导致替换时重排引发cls；必须配合size-adjust微调占位尺寸、preload预加载（带crossorigin）、同类型fallback字体链及各字重独立声明才能有效抑制抖动。
font-display: swap 为什么不能单独用
它能解决白屏，但解决不了文字“突然变高/变矮”的抖动。swap只是让系统字体先占位、等自定义字体加载完再替换，而两个字体的x-height、line-height、字宽往往不一致——浏览器按回退字体度量分配空间，替换时重排，CLS（累积布局偏移）就来了。
常见现象包括：标题加载后整体下移几像素、导航栏图标错位、按钮内文字换行点突变。本地没抖动但线上有，大概率是线上用了更高DPR屏幕或不同系统字体回退链。
- 必须搭配
font-family回退链，例如font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;，避免某些Android设备fallback到过粗的Droid Sans - 同一字体族的不同字重（如400和700）要各自声明
@font-face并写font-display: swap，否则部分字重会失效回退 - 别漏掉
size-adjust——它才是控制占位尺寸的关键，值通常在95%～105%之间，需实测
如何配出有效的 size-adjust 值
size-adjust不是调最终字体大小，而是微调回退字体的“占位比例”，让初始渲染预留的空间更接近自定义字体的实际度量。它只在 Chromium 和 Safari 17.4+ 生效，且必须和font-display: swap共存才起作用。
操作步骤很直接：
- 在 Chrome DevTools 的 Elements 面板中，右键目标文本 → Force font substitution → 选系统默认字体，观察行高、基线、字宽变化
- 打开 Rendering 面板 → 勾选 Layout Shift Regions，刷新页面，看字体切换瞬间是否有红框闪烁
- 在
@font-face中逐步试值：size-adjust: 100%→102%→103%，每次硬刷新（Ctrl+Shift+R）验证红框是否减弱 - 注意：
size-adjust只接受带%的数值，不能写1.03或103
preload 关键字体时为什么必须加 crossorigin
如果用<link rel="preload" as="font">提前拉取字体，但没加crossorigin属性，Chrome 会拒绝将该预加载资源用于@font-face——即使路径完全正确，字体仍会重新发起一次网络请求，造成双倍加载、延迟替换。
这是因为字体属于跨域资源，浏览器要求显式声明crossorigin才能共享预加载缓存。不加它，preload就等于白写。
- 正确写法：
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin> -
crossorigin属性值可以为空（即crossorigin），也可以是anonymous，但不能是use-credentials（除非你真在用带凭证的字体CDN） - WOFF2格式必须指定
type="font/woff2"，否则某些旧版浏览器可能忽略预加载
为什么 optional 在响应式页面里基本不可用
font-display: optional要求字体必须在约100ms内加载完成才启用，否则全程 fallback——这在3G、弱Wi-Fi或低端安卓机上几乎不可能。Safari 14.1之前版本还会把它直接降级为block，导致iPad mini（A12 + iOS 15）等设备白屏3秒。
它只适合一种情况：非关键装饰性字体，且你已用@supports (font-display: optional)做了兜底。
- 错误用法：
@font-face { font-family: 'BrandHeading'; font-display: optional; }（无降级，线上大量白屏） - 安全用法：必须包裹在
@supports块内，并提供font-display: swap的备用声明 - 别对正文字体、品牌主字体用
optional——用户看不到你的品牌，比慢还糟
size-adjust值必须按真实设备+真实字体对齐来测，而不是凭经验填个102%就完事。哪怕只差0.5%，在iPhone 15 Pro这类高DPR屏幕上，布局偏移也会肉眼可见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
