Pixi.js中的自定义字体

问题描述

我尝试将自定义字体加载到Pixi.js（2D WebGL框架）。

I try to load a custom font into Pixi.js (2D WebGL framework).

他们有一个使用.woff google字体的例子：

They have an example using .woff google fonts:

我转换了我的.ttf到.woff并在css中添加：

I converted my .ttf to .woff and added in css:

@font-face
{
    font-family: "HU_Adrien";
    src: local('HU_Adrien'), url('HU_A0046.woff') format('woff');;
}

div.font{
    font-family: "HU_Adrien";
    color: white;
}

它显示在我的div中但不在我的Pixi阶段。

It shows in my div but not in my Pixi stage.

...
    // create a text object with a nice stroke
    var spinningText = new PIXI.Text("I'm fun!", {font: "160px HU_Adrien", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
    // setting the anchor point to 0.5 will center align the text... great for spinning!
    spinningText.anchor.x = spinningText.anchor.y = 0.5;
    spinningText.position.x = 620 / 2;
    spinningText.position.y = 400 / 2;
...

推荐答案

你需要转换使用 HU_A0046.woff 到 HU_A0046.XML 并将文件名添加到预加载列表中。然后你应该调用 PIXI.Bitmaptext

You need to convert HU_A0046.woff with this tool to HU_A0046.XML and add the file name to the preload list. Then you should call PIXI.Bitmaptext

示例：

...
var loader = new PIXI.AssetLoader(/*more media...*/, ["HU_A0046.xml"]); 
var spinningText = new PIXI.BitmapText("I'm fun!", { font: "35px FontName"}); //You can see the font name within the XML
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
...

这篇关于Pixi.js中的自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！