页面先用系统字体显示，中文字库加载后标题换行、按钮挪位，应同时查字体加载策略和两种字体的尺寸差异。font-display:swap让文字较早可见，但不保证布局稳定。先确定实际使用的回退字体，再选择是否保留网页字体、如何缩减字库及调整字体度量，别把解决办法简化为“加一个swap”。
文字显示早，不等于不会跳
浏览器在网页字体可用前，可能先用回退字体排版。目标字体到达后，字宽、字高、行间度量不同，就可能改变行数或文本块高度。即使主要内容是中文，产品型号、英文品牌、数字和单位也会参与换行；不能因为多数汉字看似等宽，就判断字体切换不影响布局。
web.dev字体最佳实践指出，字体替换可能影响CLS，原因包括网页字体与回退字体占用的空间不同。swap的价值是减少等待期间的不可见文字，不是承诺零偏移。反过来，为避免换字而让正文长时间不可见，也可能损害阅读和绘制体验。
本地浏览器字体替换演示：相同内容和容器，左侧为文泉驿正黑，右侧为Unifont，按钮位置发生变化。这是字体度量示例，不是客户字库对比或实测CLS分数。
复现时确认到底用了哪一种字体
在受控测试页禁用网络缓存，降低网络速度后重新加载，保存截图序列或Performance录制。观察文字何时出现、何时换行，并在元素检查中查看实际渲染字体。CSS里写了某个字体名，不代表每个字符都由它渲染；缺少字形时，单个汉字、符号或数字也可能退回其他字体。
把目标字体请求与布局移动的时点对齐，再核对受影响元素。不要看到一处标题移动就直接归因字体：图片没有尺寸、异步横幅和动态错误提示也能推挤同一段文字。可以在本地分别固定回退字体、等待目标字体加载完成，比较两种稳定状态，以判断几何差异是否存在。
本地配图是主动切换本机可用字体后的实际排版，目的是让位置变化可见，并没有模拟网络下载，也没有计算CLS。正式站点仍需记录真实加载顺序、移动来源及用户是否正在交互。中文、英文混排和短按钮应分别检查，不只拿长段正文做样本。
先问是否真的需要完整中文字库
如果正文并不依赖独特字形，可评估系统字体栈，让访客直接使用设备上的字体。不同操作系统外观不完全一致，需要设计确认，但可以省去网页字库请求。若品牌确实需要网页字体，先核对许可证是否允许自托管和子集化，再优化实际使用的字重、字形与格式。
中文字符覆盖较广，不能把首页出现过的字机械做成全站唯一子集。产品型号、工程术语、人名和新增文章都可能包含缺失字符。可按字符范围拆分并配合unicode-range，但前提是每个子集确实包含声明的字形；只写unicode-range不会自动把一个大字体文件切小。
验收样本应包含常用正文、繁简差异、英文型号、货币符号、上下标及项目实际需要的字符。减少无用字重、采用合适的WOFF2资源，通常比无差别预加载所有字体更容易控制成本。字体授权条款不明确时，先保留现有合法字体，不要为了性能私自转换或分发。
光算谷歌SEO服务中的代码优化和移动端适配可按项目纳入字体排查，字体授权、设计外观及模板改动范围需要先确定。交付应分别写“文字出现时机”和“字体替换后的布局”结果，再用实验室与真实用户数据的区别解释后续观察，不把一张稳定截图当成全站CLS通过。
保留swap时，怎样减少位置变化
优先选择与目标字体相近的回退字体，再考虑度量调整。CLS优化文档介绍了size-adjust、ascent-override、descent-override与line-gap-override等手段，用于缩小回退字体与网页字体的尺寸差异。它们通常写在合适的font-face声明中，不是随便附在正文选择器上。
这些值要根据具体字体测量，不存在通用的中文网站百分比。size-adjust影响字形缩放，行高相关度量也要一起核对。只调整正文一行看着相似，长标题仍可能换成不同的行数。对中文混排页面，应在目标设备字体环境下验证，不能把另一网站的配置直接当成答案。
明确的行高与稳定的组件布局有帮助，但不能靠固定过小高度把溢出的标题裁掉。按钮可以设合理的最小尺寸；正文、翻译后的标题和辅助提示要允许扩展。稳定布局不能以截断产品条件或隐藏错误信息为代价。
上线新字体版本时保留明确的资源版本标识，分别测试旧缓存与首次加载。若CSS已经引用新度量，字体文件仍被旧缓存复用，就可能产生与预发布环境不同的排版，不能只重测一次热缓存页面。
optional、预加载和缓存如何取舍
font-display:optional允许浏览器在字体未及时可用时保持回退字体，减少后续替换机会，但首次访问可能不显示指定品牌字体。是否接受这种外观差异，应由设计与业务共同确认；不能只因为一个本地指标更好就擅自更换全站文字体验。
关键字体预加载可以让资源更早参与调度，但也会和首图等资源竞争。只为当前页面确实需要的少量关键字体考虑预加载，并核对地址、类型与跨源模式是否匹配。重复下载或拉取用不到的子集会浪费带宽。若首屏产品图也慢，应一起检查LCP图片的加载顺序。