logo标签列表

HTML5画布：fontBoundingBoxAscent vs. actualBoundingBoxAscent

javascripthtmlcanvas
3

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

  • fontBoundingBoxAscent 与 actualBoundingBoxAscent
  • fontBoundingBoxDescent 与 actualBoundingBoxDescent

MDN文档不是很清晰，且没有提供可视化。它们之间的区别是什么？

另外，如何从这些值计算文本的高度？

1个回答
6
也许这些文档更清晰：

fontBoundingBoxAscent

指定文本基线所在的水平线与用于呈现文本的所有字体的最高边界矩形之间的距离，以 CSS 像素为单位；正数表示从给定基线向上的距离。

fontBoundingBoxDescent

指定文本基线所在的水平线与用于呈现文本的所有字体的最低边界矩形之间的距离，以 CSS 像素为单位；正数表示从给定基线向下的距离。

actualBoundingBoxAscent

指定文本基线所在的水平线与给定文本的边界矩形顶部之间的距离，以 CSS 像素为单位；正数表示从给定基线向上的距离。

actualBoundingBoxDescent

指定文本基线所在的水平线与给定文本的边界矩形底部之间的距离，以 CSS 像素为单位；正数表示从给定基线向下的距离。

来源:

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是特定于正在渲染的字符串的。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接