All geek questions in one place

Html5 rendering font weight is much heavier than it should

I'm new to html5 canvas and I had a problem trying to render text. I set in my code that text should appear in Gotham with a “regular” weight, but it seems to display in bold or even heavier. I attached a code snippet and two screenshots about how heavy the weight should be and how heavy it is in the canvas for comparison.

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

What should be the weight of the font

That the font weight is displayed as in canvas

+4
source share
2 answers

font canvas 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>
Hide result
+2

, , . - , ( ).

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

.

+1

Source: https://habr.com/ru/post/1651308/

More articles:


All Articles