字体加载失败不改变盒模型规则，但导致content尺寸突变，引发重排与塌陷；需确保font-display: swap、完整@font-face声明、document.fonts.load()等待及标准doctype。
字体加载失败本身不会改变盒模型计算规则，但会直接导致 content 区域宽度/高度突变，进而引发 margin/padding/border 外观错位、元素重排、甚至父容器高度塌陷——这不是 box-sizing 出问题，是文字撑开空间的基准变了。
font-display: swap 没加，布局跳动就不可避免
不加 font-display: swap，浏览器默认用 font-display: auto（等同于 block），会阻塞文本渲染最多 3 秒；期间若字体 404 或超时，页面要么空白，要么突然用系统字体“闪入”，此时 fillText() 或 DOM 文字流的宽度已按系统字体重新计算，整个 layout 重排。
- Canvas 上调用
fillText()时，只要指定的font-family名称未激活，就静默降级为 sans-serif，且不会触发重绘 - CSS 中
width: 100px+padding: 10px的盒子，内容文字宽度从 80px（自定义字体）突变为 110px（Arial），实际占据宽度从 100px 变成 130px，父容器若没设min-height就可能塌陷 - 开发者工具里看
Computed → font-family，若显示的是"Times New Roman", serif而非你声明的字体，基本可确认加载失败或未激活
@font-face 声明漏了 font-weight 或 font-style，盒模型尺寸照样崩
哪怕字体文件加载成功，如果 @font-face 声明中缺了 font-weight: 600，而你在 CSS 里写了 font-weight: 600，浏览器就匹配不到对应字重，自动回退到系统字体——这时文字宽度又变了，盒模型“看起来”尺寸不对，其实是 content 宽度在变。
- 必须为每个实际用到的字重和样式单独声明一个
@font-face块，不能只写font-weight: 400就指望它覆盖所有 -
font-style: italic也一样：用了em或斜体标签但没声明对应@font-face，就会回退，宽度变化更隐蔽（斜体通常更窄） - 检查方式：在 Elements 面板选中文字元素 → Styles → 展开
font简写属性，看右侧是否标红或显示“inherited”，再点开font-family查最终生效值
document.fonts.load() 没等完就画 canvas，尺寸错位是必然结果
HTML5 小游戏或动态文本渲染场景下，canvas 2D 的 fillText() 不感知字体加载状态。哪怕 @font-face 已声明、font-display: swap 已启用，只要 document.fonts.load() 的 Promise 还没 resolve，measureText() 返回的宽度就是错的，后续基于该宽度做的定位、换行、裁剪全都会偏移。
- 正确做法：用
await document.fonts.load("600 16px 'MyFont'")（注意字符串格式要和ctx.font一致）后再调用ctx.fillText() - 别信
window.onload或DOMContentLoaded——它们不保证字体就绪；也别用setTimeout硬等，网络波动下不可靠 - 如果多个字体要等，用
Promise.all([font1, font2])，避免串行等待拉长首屏时间
DOCTYPE 错误或怪异模式会让问题雪上加霜
一旦 document.compatMode === "BackCompat"，浏览器进入怪异模式，不仅 box-sizing 行为退化，连 getBoundingClientRect() 返回的宽高都可能不准——这时候字体宽度变化叠加盒模型逻辑错乱，debug 成本指数级上升。
- 立刻在控制台执行
document.compatMode，不是"CSS1Compat"就得先修 DOCTYPE：必须是，全小写、无空格、无 BOM、不放在任何注释之前 - 怪异模式下，即使你写了
box-sizing: border-box，某些老式计算仍按 IE5.5 规则走，比如width是否含border可能不稳定 - 修复后刷新，再看字体加载失败时的 layout 表现——至少能排除“是盒模型本身错，还是内容撑开错”的干扰
最常被忽略的一点：字体加载失败引发的尺寸异常，90% 不是 CSS 写错了，而是你根本没等到字体就绪就去测量或绘制。别急着调 box-sizing 或重写布局，先确认 document.fonts.load() 是否真正完成、font-display: swap 是否生效、@font-face 是否覆盖了所有用到的字重和样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
