通过@font字体导入自己的字体不适用于 HTML 画布

Question

字体似乎没有链接，尝试了我能想到的一切。任何建议为什么它不起作用。

//CSS
@font-face {
font-family: 'fontOne';
src: url(../assets/fonts/fontOne.otf);
}
//JS
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");

 ctx.font = fontSize + 'pt fontOne';
 ctx.fillStyle = colour;
 ctx.fillText(dataVal, posX, posY);

Answer 1

在

绘制到画布之前，您必须等待浏览器加载字体。 我最喜欢的JavaScript库可能是Font Face Observer。