在HTML5中绘制文本使用@fontface时第一次不生效

 用@font-face加载的字体类型在画布中绘制文本时，一开始无法正确显示文本。这是因为浏览器尚未从网络加载字体。所以，它采用了已经可用的字体。

必须在使用字体之前完成加载。可以使用<div>标记来确保这一点。如果你想确保字体可用并且预加载了一些其他元素，那么你可以使用<div>标记如下操作

<div style="font-family: PressStart;"></div>  

你也可以这样加载字体−

var newFont = new FontFace(‘New Font', 'url(https://samplefont.woff2)');  
newFont.load().then(function(font){  
   document.fonts.add(font);  
   alert('Font successfully loaded!');  
});                  

Chandu yadav

更新日期：2020年6月1日

418次浏览

开启你的职业之旅

完成课程后可获得认证

开始学习