字体加载引发的布局偏移本质是FOIT/FOUT控制不当，需用PerformanceObserver监听layout-shift并关联字体资源加载时序，过滤非用户触发偏移，定位具体字体与文本容器，主动监控字体加载全过程并上报完整上下文。
字体加载引发的布局偏移（常表现为文字区域“右侧抖动”或整段重排）本质是 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）未被妥善控制所致。Performance API 本身不直接捕获字体加载事件，但可通过 PerformanceObserver 监听 layout-shift 类型，并结合字体资源加载时序交叉定位——关键在于把“字体何时加载完成”和“哪次偏移紧随其后”关联起来。
监听 layout-shift 并过滤字体相关抖动
字体切换导致的偏移通常具备明确特征：发生在首屏、非用户触发、单次 value 较小但高频、且紧邻字体资源加载完成时间点。需在页面早期注册 observer：
- 必须启用
buffered: true，否则首屏字体加载引发的偏移（如 fallback 字体 → 自定义字体切换）会被完全漏掉 - 只保留
entry.hadRecentInput === false的条目，排除点击/滚动后自动加载字体带来的干扰 - 用
entry.startTime与performance.getEntriesByType('resource')中字体文件的fetchStart和loadEventEnd做时间比对，误差在 200ms 内即视为强关联
定位触发偏移的具体字体与文本容器
单纯知道“有偏移”不够，要锁定是哪个字体、影响哪段文字：
- 优先检查
entry.sourceElement：若为<link rel="stylesheet">或内联@font-face块的父节点，说明样式注入是诱因；若为<p>、<h1>等文本容器，则说明字体度量变化已传导至内容层 - 当
sourceElement为空（常见于 CSS font-display 切换），回退到entry.affectedElements（Chrome 120+），筛选出getComputedStyle(node).fontFamily包含自定义字体名的元素 - 对匹配元素抓取
computedStyle.fontSize、lineHeight、letterSpacing，对比 fallback 与目标字体的 metrics 差异（可用 font-metrics 库预估）
主动监控字体资源加载全过程
仅靠 layout-shift 被动捕获滞后且模糊，需前置补充字体资源监控：
- 用
PerformanceObserver监听resource类型，过滤initiatorType === 'css'且name含.woff、.ttf等扩展名的条目 - 记录每个字体的
duration、transferSize及是否命中缓存（nextHopProtocol !== 'h3'或encodedBodySize === 0可作缓存线索） - 将字体加载完成时间点（
loadEventEnd）作为锚点，在前后 300ms 时间窗内聚合所有 layout-shift 条目，形成「字体-偏移」映射关系
上报时附带可复现的字体上下文
避免只传一个 value 数值，服务端无法归因。每次上报应包含：
- 触发偏移的字体文件路径（从 resource entry 提取）和
font-display值（通过解析<link>标签或 CSSOM 获取） - 受影响文本容器的
outerText截断前 50 字 +node.tagName+node.id || node.className - 当前视口宽度、设备像素比（
window.devicePixelRatio）、是否启用了系统字体缩放（matchMedia('(min-resolution: 2dppx)').matches） - 本地无抖动而线上有？重点标出该字体资源的
transferSize > 100KB且duration > 800ms的条目——这大概率是缓存缺失+网络延迟叠加导致
