canvas - 对于使用 Pango 渲染的多行文本，如何将行高精确到 100%？

Question

我们有一个图像生成应用程序，它使用Pango将图像和文本拼接在一起以创建图形。

同样的文本渲染是使用set_spacingPango 中可用的方法完成的。在此处参考相同的文档。

在命令行上，操作如下所示：

pango-view --output out.png --markup --text "<span foreground=\"#000000\" font=\"Arial 36\">This is my final.
Multiline text sample that
i am going to text with today.</span>" --spacing=0

这会生成一个带有多行字符串的图形，其中 in 如下：

上面命令行查询中传递的间距属性是指第一行的 Descent 和第二行的 Ascent 之间的空间，准确地说如下面的示例所示，这意味着将其设置为零值应该可以实现行高类似于字体大小的 100%。

当我使用 Photoshop 之类的软件以 36 pt 的字体大小和 36 pt 的字体大小来渲染等价物时，问题就出现了，这应该给出一个行高为字体大小 100% 的文本的图像。观察结果是 pango 中渲染的行高比我们在 Photoshop 中看到的要高。

从围绕字体度量的分析来看，这可能会导致此线程中的输入与 Pango here出现此问题。

我使用 Pango 的注释参数来绘制字体 Ascent 和 Descent 边界，如下所示，显示fontBoundingBoxAscent高于actualBoundingBoxAscent.

pango-view --output out.png --markup --text "<span foreground=\"#000000\" font=\"Arial 36\">This is my final.
Multiline text sample that
i am going to text with today.</span>" --spacing=0 --annotate=1

通过在 HTML 画布元素中呈现文本并使用measureText API获取字体指标也证实了这一点。下图中的前两行显示了画布内、 和fontBoundingBoxAscent周围actualBoundingBoxAscent的线。fontBoundingBoxDescentactualBoundingBoxDescent

问题：

• 从上面的分析来看，Pango 似乎使用最高的 Font Ascents ( fontBoundingBoxAscent) 作为字体的边界，而像 Photoshop 这样的软件使用较低的 ( actualBoundingBoxAscent) 从而导致渲染的差异。这个假设正确吗？
• 有没有办法像 photoshop 一样配置 Pango 的渲染（使用actualBoundingBoxAscent）？
• 如果这是由于 pango、HTML canvas 和 photoshop 下的文本堆栈不同引起的，那么 HTML canvas 和 photoshop 使用的底层技术堆栈与 pango 渲染的内容有何不同？

标签： canvasfontshtml5-canvasphotoshoppango