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實際上以像素為單位定義行高。 或者至少，在控制行高和字體大小之間沒有區別。 我找不到確切的解釋。

使用pt代替px來設置字體樣式會給您帶來更多，更接近您想要的內容。