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

【问题标题】：Html5 canvas font weight is rendering much heavier than it shouldHtml5 画布字体重量渲染比它应该重得多
【发布时间】：2016-12-21 22:20:57
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

字体字符串中的第一个属性是样式，可以是正常、斜体或斜体之一。第二个属性是weight，可以是normal（但不是Regular）。

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

应该可以。

【讨论】：

【解决方案2】：

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>

【讨论】：