Html5畫布字體重量渲染比應該重得多

Question

我是新來的HTML5畫布，我遇到了一個問題，試圖呈現文本。我已經在我的代碼中設置了文本應該在Gotham中以「常規」重量呈現，但它似乎以粗體顯示或者更重。我附上了一段代碼和兩個屏幕截圖，說明重量應該多大，以及它在畫布中的重量是多少以便進行比較。

ctxt.textAlign = "left"; 
ctxt.font = "Regular 34px Gotham, Helvetica Neue, sans-serif"; 
ctxt.fillStyle = "#fff"; 

What the font weight should be

What the font weight is rendered as in canvas

Answer 1

在字體字符串中的第一個屬性是風格，可以是正常的，斜或傾斜的。第二個屬性是重量，可以是正常的（但不是常規）。

ctxt.font = "normal 34px Gotham, Helvetica Neue, sans-serif"; 

應該工作。

Answer 2

HTML畫布字體屬性一次包含很多屬性。 Regular對其中任何一個都是無效的值。使用例如normal或lighter設置字體權重。見w3schools或這個例子：

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.font = "normal 30px Arial"; 
 
ctx.fillText("Hello World", 20, 50);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>