Html5 Leinwand font Gewicht ist Rendering viel schwerer als es

Question

Ich bin neu zu html5 Leinwand und ich habe in ein Problem versucht, Text zu rendern versucht. Ich habe in meinem Code festgelegt, dass der Text in Gotham ein "normales" Gewicht haben soll, aber es scheint in fett oder sogar schwerer wiedergegeben zu werden. Ich habe einen Ausschnitt des Codes und zwei Screenshots anbeigefügt, wie schwer das Gewicht sein sollte und wie schwer es in der Leinwand ist, um es zu vergleichen.

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

Die erste Eigenschaft in der Schriftzeichenfolge ist Stil, die eine der normalen, schräg oder kursiv sein kann. Die zweite Eigenschaft ist Gewicht, das normal sein kann (aber nicht Regular).

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

Sollte funktionieren.

Answer 2

Die HTML-Zeichensatzschriftart-Eigenschaft enthält viele Attribute gleichzeitig. Regular ist kein gültiger Wert für einen von ihnen. Verwendung z.B. normal oder lighter, um das Schriftgewicht festzulegen. Siehe w3schools oder dieses Beispiel:

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>