首次使用 @fontface 在 HTML5 <canvas> 上绘制文本时无法正常工作
htmlweb developmentfront end technology更新于 2026/1/17 19:24:17
使用通过 @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!');
});
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
