本文介绍在 nuxt（vue 3 + typescript）项目中，因异步加载外部字体导致 `gettextwidth` 计算失准的问题，并提供基于 canvas 的高精度文本宽度测量方案，彻底解决换行错乱、行高塌陷等布局异常。
在构建打字测试类应用时，动态分行为核心逻辑：需实时判断当前行文本是否超出容器宽度，从而决定是否截断并换行。你当前采用的 DOM 元素法（创建隐藏 并读取 offsetWidth）在使用系统字体时表现良好，但一旦引入 Web 字体（如 RobotMono），便极易出现 “计算宽度偏小 → 实际渲染换行 → 行数错位” 的问题。
根本原因在于：字体加载是异步的。当你调用 document.createElement(‘span’) 并设置 fontFamily: ‘RobotMono’ 时，若该字体尚未完成加载（尤其在首次渲染或缓存未命中时），浏览器会回退至后备字体（如 sans-serif）进行渲染与测量。此时 span.offsetWidth 返回的是后备字体下的宽度，远小于实际 RobotMono 渲染宽度，导致算法误判“可容纳更多文字”，最终造成视觉上单行文本被错误撑成两行，破坏三行滚动视图逻辑。
✅ 推荐解决方案：使用 Canvas measureText
Canvas API 的 context.measureText() 不依赖真实 DOM 渲染，而是基于浏览器内部字体度量引擎直接计算字形宽度，完全规避字体加载时机问题，且性能更优、结果更稳定。
