JavaScript TextMetrics 怎样读取字形实际包围盒

Canvas 里把文字放到一个矩形或标签中时，TextMetrics.width 往往不够用：它表示排版时的前进宽度，不一定等于像素真正画出来的范围。要读取字形实际包围盒，应先调用 ctx.measureText(text)，再组合 actualBoundingBoxLeft、actualBoundingBoxRight、actualBoundingBoxAscent 和 actualBoundingBoxDescent。以绘制点 (x, y) 为锚点时，可见矩形通常可以写成：left = x - leftMetric、top = y - ascent、width = leftMetric + rightMetric、height = ascent + descent。

先分清 advance width 与实际可见范围

measureText() 返回一个 TextMetrics 对象。width 描述的是当前字体下这段 inline text 的 CSS 像素宽度，适合把下一段文字放到它后面；它更像“排版游标要前进多少”。而 actualBoundingBoxLeft 和 actualBoundingBoxRight 描述字形矩形相对于对齐点的左右距离，actualBoundingBoxAscent 与 actualBoundingBoxDescent 描述基线上方和下方的实际绘制范围。

两套数值有意不相同。字形可能在 advance width 外侧有一点斜切外伸，也可能在左右留有空白。因而做文字碰撞、精确裁剪或绘制背景胶囊时，直接把 width 当作可见宽度，容易让边缘被截掉。

把 TextMetrics 字段换算成实际矩形

换算时要先固定字体和两个锚点属性。下面的函数不负责绘制，只把测量结果转换为一个可用于布局的矩形；代码中的坐标仍然是 Canvas CSS 像素坐标。

function getTextBounds(ctx, text, x, y) {
  // 先测量当前字体；font、textAlign、textBaseline 会影响结果。
  const metrics = ctx.measureText(text);

  // 四个 actualBoundingBox 数值都围绕绘制锚点定义。
  const left = metrics.actualBoundingBoxLeft ?? 0;
  const right = metrics.actualBoundingBoxRight ?? metrics.width;
  const ascent = metrics.actualBoundingBoxAscent ?? 0;
  const descent = metrics.actualBoundingBoxDescent ?? 0;

  // 左上角从锚点反推，宽高覆盖真实字形而不是 advance width。
  return {
    left: x - left,
    top: y - ascent,
    width: left + right,
    height: ascent + descent,
    advanceWidth: metrics.width,
  };
}

例如使用 ctx.textAlign = "center" 时，x 是居中锚点；使用默认的 "start" 时，左右距离仍由浏览器按照当前对齐方向定义。y 同样不是永远代表字形顶部：它受 textBaseline 影响，默认基线通常是 alphabetic。最稳妥的做法是让测量和 fillText() 使用同一组字体、对齐方式与基线设置。

布局、裁剪和斜体外伸应采用什么方案

如果目标是让文字背景或命中区域包住“真正画出的字”，采用上面的实际矩形；如果目标是计算下一段文字的起始位置，保留 advanceWidth。两者不要互相替代。

MDN 给出的斜体示例说明，actualBoundingBoxLeft + actualBoundingBoxRight 可能比 width 更大，因为字符会越过自己的 advance width。若做裁剪，建议在实际矩形四周增加 1～2 个 CSS 像素的安全留白；若做多行布局，则要分别测量每一行，不能把单行 ascent/descent 直接当成整段文本高度。

常见问题

为什么测出来的 width 和包围盒宽度不一样？

它们回答的不是同一个问题。width服务于排版游标，左右 actualBoundingBox 服务于实际字形边界；斜体外伸时，后者更宽是正常现象。

actualBoundingBoxAscent 能代替 CSS 的 line-height 吗？

不能。它只描述这次测量文字的实际上伸范围，line-height 还涉及行盒、字体度量和多行间距。需要行布局时，应把实际字形边界和行盒策略分开。

为什么同一段文字在不同设备边界略有差异？

字体文件、字体回退、浏览器实现和设备像素比都可能改变字形度量。应在目标字体真正可用后测量，并避免把某一次测量的数值硬编码成跨环境常量。