在 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

更新于：01-6 月-2020

418 次浏览

开启你的 职业生涯

完成课程获取认证

开始