解决js+canvas使用外链接字体文件，首次加载不生效

如何使用ttf格式字体？

1. 将ttf放到项目文件夹或其他位置

2. 在CSS中定义一个新的字体

@font-face {
  font-family: 'wzsb'; // 定义字体名称
  src: url('../font/wzsb.ttf'); // 文件路径
}

在HTML元素中使用该字体。

<p style="font-family: 'wzsb';">这段文字使用了自定义字体。</p>

解决首次加载时不生效

在html中使用预加载

 <link rel="stylesheet" rel="preload" href="font/wzsb.ttf" as="font" type="font/ttf" crossorigin>

1.原因：字体未加载完导致的

document.fonts.load('24px wzsb').then(() => {  
 // 利用canvas绘制图形
});