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

Question

当我指定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;
}

<canvas id='cnv'></canvas>

​

Answer 1

我将你的“测试”文本放大了一倍，恰好比原始文本低了50像素，然后在文本上叠加了一个50x50的图像，猜猜会发生什么？

​

​

事实证明，ctx.font实际上是defines line height in pixels.的，或者至少，在控制行高和字体大小之间没有区别。我找不到一个很好的解释来解释为什么。

用pt代替px来设计你的字体样式，会给你带来更多更接近你想要的东西。