measureText.width 是唯一跨浏览器稳定的文本宽度测量属性，需预先设置完整 font 样式；中文混排应逐字符或按词元测量，避免平均宽度估算。

measureText 能准确返回文字在当前样式下的像素宽度，但前提是上下文设置必须完整且一致。

必须先设置好字体样式

ctx.font 必须在调用 measureText 前明确指定，包括字号、字重和字体族，例如：

• ctx.font = "16px 'PingFang SC', sans-serif"
• 不设 font 或设为空时，measureText.width 返回 0
• 中英文混排时，不同字体对同一字符的宽度计算可能不同，应使用目标渲染字体

测量结果只可靠依赖 width 属性

TextMetrics 对象目前仅 width 属性具备跨浏览器稳定性：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• actualBoundingBoxAscent / fontBoundingBoxDescent 等属性在 Chrome/Firefox/Safari 中表现不一，不宜用于行高或基线定位
• 不要用 metrics.actualBoundingBoxLeft 或 Right 做对齐计算，它们受 textAlign 影响且误差明显
• 实际业务中，只需关注 metrics.width 即可满足换行、居中、截断等绝大多数需求

注意上下文状态同步

measureText 的结果与当前绘图状态强绑定：

立即学习“前端免费学习笔记（深入）”；

• ctx.textAlign 和 ctx.textBaseline 不影响 width，但会影响 fillText/strokeText 的绘制起点 —— 测量时无需设，但绘制时必须匹配预期位置
• 如果后续要用 maxWidth 参数缩放文本（如 fillText(text, x, y, maxWidth)），测量时应使用相同 font，否则缩放逻辑会失准
• 建议封装测量函数，自动保存/恢复 font，避免被外部代码意外覆盖

中文与英文的测量差异要单独处理

中文没有空格分隔，单字宽度不均（如“一”比“龘”窄得多），不能靠字符数估算：

• 逐字符测量虽慢但最稳妥，适合短文本或高精度场景（如标签、弹窗标题）
• 长段落可先按词元切分（如用空格、标点、Unicode 分隔符），再逐词测；中文需借助简单分词或按 Unicode 范围识别汉字块
• 避免使用平均字符宽 × 字数，实测误差常超 ±20%，尤其在小字号或非等宽字体下