PixiJS：加載自定義字體

我目前在學習Pixijs。我經歷了這個傢伙的教程：github.com/kittykatattack/learningPixi 不錯的一個順便說一句。PixiJS：加載自定義字體

Environement： XAMPP，火狐，Pixijs，HTML，CSS

現在，我嘗試加載自定義字體。 我第一次加載Ma Pixijs項目應該運行的頁面時，字體沒有顯示，控制檯顯示了一些錯誤信息... 第二次加載頁面（不刪除緩存）文本顯示與給定的字體！

爲什麼？

這裏是在加載字體的片段：

的index.html：

<head> 
    <meta charset='UTF-8' /> 
    <style> 
     @font-face{ 
      font-family: "FFFForward"; 
      src: url("assets/fonts/fffforward.TTF"); 
     } 

     * {padding: 0; margin: 0} 
    </style>

app.js：

function DrawText(){ 

PointsTopText = new Text(
    "P1: " + PointsTop, 
    {fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'} 
); 
PointsBotText = new Text(
    "Cpu: " + PointsBot, 
    {fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'} 
); 

PointsTopText.position.set(0, Renderer.height/2 - 32 * 2); 
PointsBotText.position.set(0, Renderer.height/2); 

World.addChild(PointsTopText); 
World.addChild(PointsBotText); 
}

此處是錯誤日誌控制檯：

控制檯：

downloadable font: bad search range (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: bad range shift (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: cmap: bad id_range_offset (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: hdmx: the table should not be present when bit 2 and 4 of the head->flags are not set (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: hdmx: Table discarded (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14

正如我所說的，出現此消息只是我第一次加載我的網頁。第二次一切都很好。

我該怎麼做才能防止這種情況發生？

爲什麼會發生這種情況？

這是什麼意思？

來源

2017-09-14 user2857564

使用webfontloader - https://github.com/typekit/webfontloader - 同步加載您的字體之前您在PixiJS中做任何繪圖。這也適用於其他基於canvas的應用程序。

放入<頭的HTML頁面>部分如下：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
<script> 
    WebFont.load({ 
     google: { 
      families: ['Press Start 2P'] 
     }, 
     active:e=>{ 
      console.log("font loaded!"); 
      // now start setting up your PixiJS (or canvas) stuff! 
     } 
    }); 
</script>

來源

2017-11-15 04:40:39 tonethar

PixiJS：加載自定義字體

回答

相關問題