本文介绍在 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 渲染，而是基于浏览器内部字体度量引擎直接计算字形宽度，完全规避字体加载时机问题，且性能更优、结果更稳定。
以下是适配你 Nuxt 项目的精简可靠实现（无需额外依赖）：
// utils/textWidth.ts
export function getTextWidth(text: string, fontSize = '1.7rem', fontFamily = 'RobotMono'): number {
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
const ctx = canvas.getContext('2d')!;
// 精确复现样式（注意：fontSize 必须带单位，fontFamily 需含后备字体）
ctx.font = `${fontSize} ${fontFamily}, monospace, sans-serif`;
return ctx.measureText(text).width;
}
// 在你的组件中替换原函数：
function getTextWidth(text: string) {
return getTextWidth(text, '1.7rem', 'RobotMono');
}? 关键细节说明：ctx.font 必须完整声明 size font-family，且 fontFamily 后应追加通用后备字体（如 monospace, sans-serif），确保即使 RobotMono 未加载也能获得合理度量基准；canvas 复用单例（通过闭包属性 getTextWidth.canvas 缓存），避免频繁创建销毁开销；无需 appendChild/removeChild，无 DOM 操作，线程安全，适合高频调用（如每词/每键测量）。
⚠️ 额外注意事项
-
字体预加载优化：在 nuxt.config.ts 中启用字体预加载，进一步降低首屏度量偏差风险：
export default defineNuxtConfig({ app: { head: { link: [ { rel: 'preload', href: '/fonts/RobotMono-Regular.woff2', as: 'font', type: 'font/woff2', crossorigin: 'anonymous' } ] } } }) - 响应式场景处理：若容器宽度可能动态变化（如窗口缩放），请在 window.resize 或 useResizeObserver 中重新触发 divideTextInLines()，而非仅依赖 onMounted。
- 空格与连字符：measureText 对空格宽度计算精准，但需注意 CSS 中 whiteSpace: 'nowrap' 仅影响 DOM 渲染，对 Canvas 无影响——因此你的逻辑中无需在 Canvas 测量时模拟该样式。
✅ 总结
将 span.offsetWidth 替换为 canvas.getContext('2d').measureText() 是解决 Web 字体文本宽度测量不准的行业标准实践。它不依赖布局重排、不受字体加载阻塞、结果稳定可预测，完美契合打字测试这类对文本流精度要求极高的交互场景。立即替换后，你的三行滚动逻辑将严格按视觉呈现分隔，告别“看似能容、实则溢出”的诡异换行问题。
