通过@ font-face导入自己的字体不适用于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。