虽然字体文件已经请求成功,但使用时还是无效。
首先引入
<style>
@font-face {
font-family: Poppins;
src: url('@/assets/fonts/Poppins-SemiBoldItalic.ttf');
}
</style>
再使用以下方式判断字体加载状态,当字体加载完后再使用字体。
document.fonts.load('bold 18px Poppins').then(() => {
ctx.font = 'bold 18px Poppins' //字体大小及样式
ctx.fillText(4, 22, 15) //内容及坐标
})
注意:如果你的字体名称有空格需要用引号,如:"bold 18px 'Poppin s'"