HTML全局字体加载失败对盒模型尺寸的影响分析

从核心结论来看，字体加载失败本身并不会改变盒模型的计算规则，但会导致content区域的宽度和高度发生突变，进而影响margin、padding、border的表现，引发重排甚至父容器高度塌陷。这并非box-sizing属性设置错误，而是文字占据空间的基准发生了变化。

开发者可能会发现文字宽度变化、布局跳动、父容器塌陷等现象，容易误以为是box-sizing写错了，但问题往往出现在更早的环节。

font-display: swap 未设置，布局跳动难以避免

如果不添加font-display: swap，浏览器会默认采用font-display: auto（实际相当于block），这会阻塞文本渲染最多3秒。在此期间，如果字体文件加载失败或超时，页面可能出现空白或系统字体“闪入”现象。此时，无论是fillText()还是DOM中的文字流，其宽度都已按系统字体重新计算，导致整体布局重排。

• 在Canvas中使用fillText()时，如果指定的font-family名称尚未激活，浏览器会静默降级为sans-serif，且不会触发重绘，影响较为隐蔽。
• 举例说明：一个盒子设置width: 100px和padding: 10px，当内容文字宽度从自定义字体的80px变为Arial的110px时，实际占据宽度从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()返回的宽高都可能不准。字体宽度变化叠加盒模型逻辑错乱，调试难度成倍增加。

• 立即在控制台执行document.compatMode，若非"CSS1Compat"，则需修复DOCTYPE：必须使用</code>，全小写、无空格、无BOM、不能放在任何注释之前。
• 在怪异模式下，即使编写了box-sizing: border-box，某些旧式计算仍会按IE5.5规则进行，例如width是否包含border可能不稳定。
• 修复后刷新页面，再次观察字体加载失败时的布局表现，有助于排除“盒模型本身错误”与“内容撑开错误”之间的干扰。

最容易被忽略的一点是：字体加载失败引发的尺寸异常，90%并非CSS编写错误，而是开发者未等到字体就绪便进行测量或绘制。建议不要急于调整box-sizing或重写布局，而是先确认document.fonts.load()是否真正完成、font-display: swap是否生效、@font-face是否覆盖了所有用到的字重和样式。