Html5 画布字体重量渲染得比它应该的重得多

Question

我是 html5 canvas 的新手，在尝试渲染文本时遇到了问题。 我在我的代码中设置了文本应该以“常规”重量在 Gotham 中呈现，但它似乎以粗体甚至更重呈现。 我附上了一段代码和两张屏幕截图，说明重量应该有多重以及它在画布中有多重以供比较。

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

Answer 1

HTML 画布字体属性一次包含许多属性。 Regular对它们中的任何一个都无效。 使用例如normal或lighter来设置字体粗细。 请参阅MDN或此示例：

 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

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

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

应该工作。