javascript - HTML5 Canvas : fontBoundingBoxAscent vs. actualBoundingBoxAscent

Question

TextMetrics API返回一些具有相似名称的字段:

• fontBoundingBoxAscent 与 actualBoundingBoxAscent
• fontBoundingBoxDescent 与 actualBoundingBoxDescent

MDN 文档不是很清楚，也没有提供视觉效果。它们有什么区别？

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

Answer 1

也许这些文档更清楚:

fontBoundingBoxAscent

The distance from the horizontal line indicated by the textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.'

fontBoundingBoxDescent

The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the lowest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.

actualBoundingBoxAscent

The distance from the horizontal line indicated by the textBaseline attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.

actualBoundingBoxDescent

The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.

Source:

https://webplatform.github.io/docs/apis/canvas/TextMetrics/fontBoundingBoxAscent/ https://webplatform.github.io/docs/apis/canvas/TextMetrics/fontBoundingBoxDescent/ https://webplatform.github.io/docs/apis/canvas/TextMetrics/actualBoundingBoxAscent/ https://webplatform.github.io/docs/apis/canvas/TextMetrics/actualBoundingBoxDescent/

要计算文本高度，您可以执行以下操作:

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

fontHeight 是边界框高度，与呈现的字符串无关。 actualHeight 特定于正在呈现的字符串。