在 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 次瀏覽

開啟你的 職業生涯

完成課程獲取認證

開始