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%，尤其在小字号或非等宽字体下
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
