Я запускаю именно этот фрагмент локально. Я не могу каким-либо образом воспроизвести эффект на StackOverflow, но я все равно разместил код, чтобы увидеть, не звонит ли такая вещь кому-нибудь.
CONTAINER
CANVAS (absolute, z-index 1)
ELEMENTS (relative, z-index 2)
его родственные элементы (а я что-то нарисовал на нем) шрифт становится тонким и размытым. В первом примере за текстовым элементом находится холст. У второго он находится снаружи, где проблема уходит локально для меня. Этого не произойдет, если я не буду рисовать на холсте, и этого не произойдет, если я использую любой другой шрифт. Есть идеи?
function paint (id) {
var canvas = document.getElementById(id);
var cc = canvas.getContext('2d');
cc.fillStyle = 'red';
cc.fillRect(0, 0, 5, 5);
}
paint('c1');
paint('c2');
body {
font-family: Jura;
}
.a {
position: relative;
background-color: black;
margin-bottom: 30px;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
canvas#c2 {
top: 30px;
}
.b {
position: relative;
z-index: 2;
font-size: 24px;
font-style: italic;
color: white;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@400&display=swap" rel="stylesheet" />
</head>
<body>
<div class="a">
<canvas id="c1" width="5" height="5"></canvas>
<div class="b">TEXT</div>
</div>
<div class="a">
<canvas id="c2" width="5" height="5"></canvas>
<div class="b">TEXT</div>
</div
</body>
</html>