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

HTML canvas字体属性一次包含许多属性。 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>

Answer 2

字体字符串中的第一个属性是style，可以是normal，oblique或italic之一。第二个属性是权重，可以是正常的（但不是常规）。

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

应该工作。