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

開啟你的職業之旅

完成課程後可獲得認證

開始學習