“为什么”之间有区别；宽度“；及；实际边界框左+；“实际BoundingBoxRight”；在“a”中；TextMetrics"；HTML5画布的对象？

如代码段所示，当我调用

measureText

时，我得到以下结果：

{
“宽度”：45.43333435058594，
“actualBoundingBoxLeft”：0，
“实际BoundingBoxRight”：45.35，
“实际边界上升”：18，
“实际BoundingBoxDescent”：0
}

如果

actualBoundingBoxLeft

为零，为什么

width

和

actualBoundingBoxRight

之间存在差异

c2d=document.getElementById（'canvas'）.getContext（'2d'）；
c2d.方向=‘ltr’；
c2d.font='24px衬线'；
console.log（c2d.measureText（'TeX'））
希望我能得到你想要的，我会试试看

width
属性提供。占用的空间不包括左侧和右侧轴承

–宽度属性

该内联框的宽度，以CSS像素为单位。（文本的前进宽度。）

–actualBoundingBoxLeft属性

从textAlign属性给定的对齐点到给定文本边框左侧与基线平行的距离，单位为CSS像素；正数表示从给定路线点向左的距离

其中还说明：
此值和下一个值（actualBoundingBoxRight）之和可以大于内联框的宽度（宽度），特别是对于倾斜字体，其中字符突出其前进宽度

–actualBoundingBoxRight属性
从textAlign属性给定的对齐点到给定文本边框右侧与基线平行的距离，单位为CSS像素；正数表示从给定路线点向右的距离


一些例子
使用canvas的MeasureText（左正常，右斜体）中的数据执行此时间
f
：


错误：切换了中间和底部宽度线（蓝色线）的位置，但没有更新标签。对于图片中的标签，“中间”是“底部”，而“底部”是“中间”。稍后我会争取时间上传新的内容。

特别是倾斜版本显示了这一点。textBaseline（灰色水平线）后面的蓝线，从textAlign（灰色垂直线）开始，显示图示符的宽度值。这就是字体提升“字体”的程度

边界框左/右是水平扩展中的极值。如果你把它看成一个长方形。上升和下降也是如此。它们是向上/向下的两个极端。但是，作为字体的“重叠”（字距调整等），它不是表示高级宽度的宽度因素

方框宽度之和为
111+39=150
，但
宽度仅为
72.28


至于你的样本，这么小的字体很难找到。（相对而言）。将for的值增加到1024px或其他任何值都可以得到更清晰的结果。有如此小的分数和路径计算，人们将错过微妙的像素分数。对于1024px：

  actualBoundingBoxAscent  :  747
  ​actualBoundingBoxDescent :   14
  ​actualBoundingBoxLeft    :  -10
  ​actualBoundingBoxRight   : 1933.5
  ​width                    : 1938.5

考虑到总宽度，差异（1933.5+-10=1923.5）仍然很小，但至少存在于服务对象中

另一个带有
+
的示例：


当我们观察到这个字形时，文字的前进速度远远超过了它在绘制像素中所占据的位置。甚至在某些情况下，字形根本无法推进文本。它们仍然可以独立于文本，但它的定义在某种程度上适用于前面的glyph。。。例如，上面的钩子的宽度为零


但有些仍被定义为进阶字符，例如：


该示例的另一个有趣之处是，可以看到下降是负的（不低于文本基线），上升也是存在的。从逻辑上来说，当一个人看着它，但可以是一个陷阱

可以在画布上放大测试，但必须仔细观察。从我开始研究cavases已经太久了。这是一个近距离视图，但尚未验证或检查线条的精确度（精确到像素）

如果它是正确的，它会显示一个细微的差异，其中宽度在使用24px字体的
TeX
结尾处增加