measuretext()测得的宽度精准与否取决于字体状态是否可控：必须显式设置完整ctx.font（含字号、字重、字体族及fallback），确保字体已加载完成，且仅.width属性跨浏览器可靠；高度需组合fontboundingboxascent与fontboundingboxdescent估算。
Canvas 的 measureText() 能测出文字宽度，但“精准”不是默认属性——它取决于你是否控制住了字体状态和测量上下文。真正影响精度的，从来不是 API 本身，而是你有没有让画布“看见”和最终渲染时完全一致的字体。
宽度测量：width 属性可靠，但前提是字体已就绪且设置完整
measureText() 返回的 TextMetrics 对象中，只有 .width 是跨浏览器稳定可用的。但它测的不是字符串长度，而是「当前 ctx.font 下、已加载完成的字体」所渲染出的像素宽度。常见失准原因：
- 没显式设置
ctx.font，直接调用 —— 浏览器按默认"10px sans-serif"计算，和你 fillText 时用的字体完全不匹配 - 字体声明缺要素：比如只写
"16px SimSun"，漏了字重或 fallback（如"bold 16px 'SimSun', sans-serif"），某些系统会回退失败，导致宽度偏差 2–3 倍 - 自定义字体（@font-face）未加载完成就测量 —— 浏览器临时 fallback 到系统字体，测完再切回真字体，宽度突变
稳妥做法：用 document.fonts.load("bold 16px 'YourFont'") 或 FontFaceSet.check() 确认字体就绪后再测；若无法等待，至少在 ctx.font 中明确写出 fallback 字体（如 "16px 'YourFont', sans-serif"）。
高度测量：没有现成 height，需组合 ascent/descent 属性
measureText() 不返回高度，但 TextMetrics 提供了几个关键边界值：
- fontBoundingBoxAscent + fontBoundingBoxDescent：该字体整体字框高度（含未使用空白），相对稳定，适合做行高基准
- actualBoundingBoxAscent + actualBoundingBoxDescent：当前文本实际占用的上下边界之和，更贴近视觉高度，但 Safari 和旧 Chrome 支持不一，生产环境慎用
- 单独用
actualBoundingBoxAscent可近似文字顶部到基线距离，配合textBaseline = 'alphabetic'绘制时较准
若要求严格对齐（如垂直居中），推荐用 fontBoundingBoxAscent + fontBoundingBoxDescent 作为总高度参考，并预留 1–2px 容差 —— 实测不同字体/字号下，DOM 中用 span 测得的高度与该值差值通常在 ±1px 内。
中英文混排与特殊字符：统一 fallback 是降低误差最简单的方式
中文、英文、数字、标点、全角/半角空格，在不同字体里宽度差异极大。例如 “A” 在 Arial 和 “Ａ”（全角）在微软雅黑里宽度可能差一倍。
- 避免依赖系统自动 fallback，主动在
ctx.font中指定明确 fallback 链，如"normal 14px 'Microsoft YaHei', 'Helvetica Neue', sans-serif" - 对 emoji 或图标字体，measureText() 可能返回异常值（部分浏览器不支持），建议单独判断或降级为固定宽度
- 空格宽度受字体影响明显，逐词换行逻辑中，别假设空格恒为 4px —— 应和单词一起测量
性能与稳定性：纯计算，但别在字体未定型时调用
measureText() 本身不触发重绘，是纯 CPU 计算，可在循环或高频逻辑中放心使用。但它的输出稳定性完全绑定字体状态：
- 字体加载期间多次调用，可能每次返回不同结果 —— 不是 bug，是浏览器 fallback 行为的自然表现
- 避免在
window.onload前就批量测量，尤其页面用了 Web Font；优先监听document.fonts.ready - 不需要为每次测量新建 canvas 或 context —— 复用同一个 2D 上下文即可，只要 font 设置一致，结果可复现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
