javascript - 通过@font-face 导入自己的字体不适用于 HTML Canvas

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

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