You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" />
<metaname="viewport" content="width=device-width, initial-scale=1.0" />
<metahttp-equiv="X-UA-Compatible" content="ie=edge" />
<style>
@font-face {
font-family: "Abril Fatface";
font-style: normal;
font-weight: 400;
src: url("./abril-fatface-v9-latin-regular.ttf") format("truetype");
}
</style></head><body><canvaswidth="600" height="400"></canvas><script>const$canvas=document.querySelector("canvas");constctx=$canvas.getContext("2d");ctx.font="32px Abril Fatface";ctx.fillText("Draw text in canvas with special font",20,100);</script></body></html>
如图, 自定义字体并没有生效. 但如果尝试在初次绘制后, 延时一段时间再次绘制, 就没问题
ctx.fillText("Draw text in canvas with special font",20,100);setTimeout(()=>{ctx.clearRect(0,0,600,400);ctx.fillText("Draw text in canvas with special font",20,100);},500);
asyncfunctiondrawText(){ctx.font="32px Abril Fatface";awaitdocument.fonts.load(ctx.font);ctx.fillText("Draw text in canvas with special font",20,100);}drawText();
另外你还可以通过 js 而不是 css 来加载字体, 这样会更方便些
asyncfunctiondrawText(){constAbrilFatface=newFontFace('Abril Fatface','url(./Abril-Fatface.ttf)',{style: 'normal',weight: 400});awaitAbrilFatface.load();ctx.font="32px Abril Fatface";ctx.fillText("Draw text in canvas with special font",20,100);}drawText();
The text was updated successfully, but these errors were encountered:
yinxin630
changed the title
Canvas 绘制文字时, 需要等待字体加载完成
在 Canvas 中使用自定义字体绘制文字时, 为什么第一次绘制没应用字体?
Apr 15, 2020
yinxin630
changed the title
在 Canvas 中使用自定义字体绘制文字时, 为什么第一次绘制没应用字体?
在 Canvas 中使用自定义字体绘制文字时, 为什么第一次绘制字体不生效?
Apr 15, 2020
yinxin630
changed the title
在 Canvas 中使用自定义字体绘制文字时, 为什么第一次绘制字体不生效?
解决在 Canvas 中使用自定义字体初次绘制文字时不生效的问题
Apr 15, 2020
请尝试如下代码, 需要先下载字体 http://d.xiazaiziti.com/en_fonts/fonts/a/Abril-Fatface.ttf
如图, 自定义字体并没有生效. 但如果尝试在初次绘制后, 延时一段时间再次绘制, 就没问题
问题原因是因为我们所用的字体需要异步加载, 它是在初次绘制文字时才开始加载的. 因为在初次绘制时, 字体还没有加载完毕, 所以会使用默认字体渲染
浏览器提供了检查相应字体是否加载完成的 API. document.fonts.check()
浏览器还提供了等待字体加载完成和主动加载字体的 API. document.fonts.ready / document.fonts.load(). 我们可以直接触发字体加载, 然后等待字体加载完毕后, 再在 canvas 中绘制文本. 就可以解决问题了
另外你还可以通过 js 而不是 css 来加载字体, 这样会更方便些
The text was updated successfully, but these errors were encountered: