Pixi.js 中的自定义字体

Posted 2023-03-13

【中文标题】Pixi.js 中的自定义字体

【英文标题】：Custom font in Pixi.js

【发布时间】：2013-09-30 22:09:03

【问题描述】：

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

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

https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text

我将我的 .ttf 转换为 .woff 并添加到 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 阶段。

...
    // 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;
...

【问题讨论】：

会不会是你的行中没有列出来源？喜欢.woff?

在 GoodBoy 示例中，他们正在预加载字体，不确定您是否遇到 css 种族问题。尝试设置font: "160px HU_Adrien, arial" ...，看看你是否至少得到了文字。

【参考方案1】：

您需要将HU_A0046.woff 和this tool 转换为HU_A0046.XML 并将文件名添加到预加载列表中。那你应该打电话给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;
...

【参考方案2】：

要在 PIXI 中使用自定义网络字体，您需要使用 google web font api 有了它，您可以使用来自 Google 和其他 cdn 的网络字体以及您自己的本地网络字体 你可以在https://github.com/typekit/webfontloader阅读更多内容

<script>
  WebFontConfig = 
    typekit:  id: 'xxxxxx' ,
    google: 
        families: ['Droid Sans', 'Droid Serif']
    ,
    custom: 
        families: ['My Font', 'My Other Font:n4,i4,n7'],
        urls: ['/fonts.css']
    ,

    active: function() 
      // do something
      init();
    
  ,

  active: function() 
    // do something
    init();
  
  ;

  (function() 
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  )();
</script>

在本例中，fonts.css 文件可能如下所示：

@font-face 
  font-family: 'My Font';
  src: ...;

@font-face 
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: normal; /* or 400 */
  src: ...;

@font-face 
  font-family: 'My Other Font';
  font-style: italic;
  font-weight: normal; /* or 400 */
  src: ...;

@font-face 
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: bold; /* or 700 */
  src: ...;

*在字体渲染后开始使用字体很重要

*使用以下工具转换字体：http://www.font2web.com/

*它将为您提供所需的网络字体文件以及自定义字体的 css 代码

【参考方案3】：

安装 .woff 文件（无需转换或位图文本）并添加后，它可以在我的 pixi 4 应用程序中运行

font: "24px Open Sans Regular"

我的 pixi 风格定义。

字体.css

@font-face 
    font-family: 'Open Sans Regular';
    src: url('/font/OpenSans-Regular.woff');
     /* format("woff"); // it never worked with a format */

app.js

var WebFont = require("webfontloader");
let WebFontConfig = 
    custom: 
        families: ['Open Sans:300,400italic,500italic,600italic,700italic,400,500,600,700'],
        urls: ['/css/fonts.css']
      
  ;
  WebFont.load(WebFontConfig);

webpack.config.js

module.exports = 
    entry: 
        main: "./src/app.ts",
        // vendor: [
        //     "webfontloader"
        // ]
    ,
    output: 
        filename: "./bundle.js",
    ,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: 
        alias: 
            "webfontloader": path.resolve(__dirname, "./node_modules/webfontloader/webfontloader.js")
        ,
        // Add '.ts' as resolvable extensions.
        extensions: [".ts", ".js"]
    , …

确保安装

npm install webfontloader --save
npm i -D @types/webpack-env