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

我是新来的HTML5画布，我遇到了一个问题，试图呈现文本。我已经在我的代码中设置了文本应该在Gotham中以“常规”重量呈现，但它似乎以粗体显示或者更重。我附上了一段代码和两个屏幕截图，说明重量应该多大，以及它在画布中的重量是多少以便进行比较。Html5画布字体重量渲染比应该重得多

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

来源

2016-08-15 Olu E.

在字体字符串中的第一个属性是风格，可以是正常的，斜或倾斜的。第二个属性是重量，可以是正常的（但不是常规）。

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

应该工作。

来源

2016-08-15 17:23:44

谢谢！这似乎已经成功了。 –

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>

来源

2016-08-15 17:32:12 andreas

感谢并感谢您的链接 - 非常有帮助！ –

不客气，很高兴我能帮到你！ – andreas

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

回答

相关问题