使用@fontface在HTML5中繪製文字第一次不起作用

 使用透過 @font-face 載入的字體在畫布中繪製文字一開始無法正確顯示文字。這是因為瀏覽器尚未從網頁載入字體。因此，它使用已經可用的字體。

字體必須在使用之前完成載入。這可以使用 標籤來確保。如果您想確保字體可用並且預先載入了一些其他元素，那麼您可以使用 標籤來完成此操作，如下所示

<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!');  
});                  

以上是使用@fontface在HTML5中繪製文字第一次不起作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！