canvas 中使用特殊字体的 字体优化

541 阅读1分钟

canvas绘制文字0%使用了特殊字体,‘HuoshanYunsong-Black’。

正确的加载方式:

image.png

但很不幸加载成了下方的图片,也就是特殊字体并没有加载出来:

image.png

代码改动: 将字体和字体定义放到pulic下,然后再main.js 中引入;

image.png

font.css中

image.png

继续,关键的一步:

因为我在绘制canvas中使用了HuoshanYunsong-Black,所以我要确保字体加载完毕后绘制文字,使用下面代码:

 document.fonts.ready.then(function () {
       // do something
  })