Javascript HTML5画布：fontBoundingBoxAscent与实际BoundingBoxAscent

返回几个具有类似名称的字段：

• fontBoundingBoxAscent

  vs.实际BoundingBoxAscent

• fontBoundingBoxDescent

  vs.

  actualBoundingBoxDescent

MDN文档不是很清楚，也没有提供可视化的文档。他们之间有什么区别

---

此外，作为后续，我如何根据这些值计算文本的高度？

也许这些文档更清楚：

fontBoundingBoxAscent

与文本基线指示的水平线的距离 属性设置为所有属性中最高边界矩形的顶部 用于呈现文本的字体（CSS像素）；正数 表示从给定基线向上的距离。”

fontBoundingBoxDescent

与文本基线指示的水平线的距离 属性设置为所有对象的最低边界矩形的底部 用于呈现文本的字体（CSS像素）；正数 表示从给定基线向下的距离

实际BoundingBoxAscend

与文本基线指示的水平线的距离 属性设置为给定文本的边框顶部，以 CSS像素；正数，表示从地面向上的距离 给定基线

实际BoundingBoxDescent

与文本基线指示的水平线的距离 属性设置为给定文本的边框的底部， 以CSS像素为单位；表示下降距离的正数 从给定的基线开始

来源：

要计算文字高度，可以执行以下操作：

fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
actualHeight = actualBoundingBoxAscent + actualBoundingBoxDescent;

fontHeight

是边界框高度，与渲染的字符串无关<代码>实际高度特定于正在渲染的字符串