html5画布文本不是指定的大小答案

【问题标题】：html5 canvas text not the specified sizehtml5画布文本不是指定的大小
【发布时间】：2019-09-12 00:13:12
【问题描述】：

当我将 HTML5 画布字体指定为“50px Arial”时，我希望每个大写字母的高度为 50 像素。但是，我得到了 35 像素的高度。我在MDN 找不到任何东西。我错过了什么？

我使用的是 Firefox Quantum 69.0（64 位），layout.css.devPixelsPerPx 属性设置为 1。

var cnv = document.getElementById('cnv');
cnv.width = 300;
cnv.height = 200;
var ctx = cnv.getContext('2d');
ctx.font = '50px Arial';
ctx.fillText('Test',100,100);

canvas {
  background-color:green;
  width: 300px;
  height:200px;
}

&lt;canvas id='cnv'&gt;&lt;/canvas&gt;

【问题讨论】：

标签： javascript html5-canvas font-size

【解决方案1】：

我将您的“测试”文本加倍，正好比原始文本低 50 像素，然后在文本上叠加一个 50x50 的图像，你猜怎么着？

原来ctx.font 实际上是defines line height in pixels. 或者至少，控制行高和字体大小之间没有区别。我找不到确切的解释。

使用pt 代替px 来设置您的字体样式可以让您的字体更加接近您想要的。

【讨论】：

你到底是怎么把它翻倍的？
@Rodrigo 只需重复代码并更改坐标即可。在这种情况下，ctx.font = '50px Arial'; ctx.fillText('Test',100,150);
那么定义行高的不是ctx.font，而是您的坐标。
我想这不是展示我想说的话的最佳方式。行高仍由font 设置定义。如果您希望您的字母真正具有绝对大小（而不仅仅是在 50px 行内），那么在定义字体大小时使用 pt 而不是 px。因为正如你所说，“50px”字体只占用大约 35px。
我读过pt 以及它是如何基于一英寸的任意分数 (1/72)。我的网站将生成一个 PNG（因此以像素为单位）。尽管50 pt 给了我一个更好的近似值（大写46 像素高），但我想知道这是否是要走的路，而不是理解px 背后的基本原理。