話不多説先放實現代碼↓

const app = new PIXI.Application({ backgroundColor: 0x777777 });
document.body.appendChild(app.view);

// 將iconfont提供的字符轉換為中文
const toFontIcon = (unicode) => {
  if (unicode === "") return "";
  const num = unicode.replace("&#x", "").replace(";", "");
  const str = String.fromCharCode(parseInt(num, 16).toString(10));
  return str;
};

const icon = toFontIcon("");

// 可以和其他文字一起使用，如果其他文字沒有在iconfont字體集中找到對應的字體，則按瀏覽器默認字體顯示
const text = new PIXI.Text(`123${icon}`, {
  fontFamily: "iconfont",
  fontSize: 48,
  fill: "#26d94a",
});

app.stage.addChild(text);

效果圖↓

使用的是iconfont中Unicode的方式來實現的

很心酸，走了一天的彎路，因為pixijs的文字展示有Text和BitmapText兩種，就直接掉bitmap的坑裏去了

雖然這種實現方式有很多問題(後面會説到)，但是既然都實現了，還是寫出來吧

BitmapText官方提供的例子裏面加載了一個xml文件，那麼要先把我需要的字體轉換成xml文件

使用的是Bitmap font generator這個工具，操作方法還是比較簡單的

第一步

！一定要在Font這裏選中導入的字體文件

第二步

先清空當前選中的字體，再導入需要的字體文件

Edit -> Clear all chars in font -> Select chars from file

導入正確的情況下，你會看到你需要的字體在格子裏是高亮狀態

第三步

導出設置，設置深度為32位，不然沒辦法顯示為透明的，導出的文字描述格式為xml

第四步

導出之後會有一個fnt和png格式的文件，fnt直接改為xml就能用了，png會顯示你所有的字體

Options -> Save Bitmap font as…

效果↓

可以看出來，鋸齒很嚴重，而且可設置的樣式非常少

tips: Text是可以使用TextStyle的，而BitmapText只能用Object，而屬性寥寥無幾……

-----------------------------------分割線----------------------------------------------------------------

坑：因為字體文件是寫在css中加載的，有可能文件還沒有加載完，而js已經執行完了，這時候就會發現字體文件加載不出來

而css中的字體文件又不好監聽是否加載完畢

這時候可以用一個騷操作：
在html中寫一個包含字體圖標（隨便寫一個就行）的dom，然後把這個dom隱藏起來（不要用display:none，這樣是沒有效果的，可以用絕對定位，設置方向負值來隱藏），保險起見再把代碼放在window.onload中，這樣字體圖標就能渲染出來了

我的理解是，這樣做可以讓瀏覽器先把字體渲染出來，然後在canvas繪製時字體文件就是加載完畢的

over