Пользовательский шрифт в Pixi.js

Я пытаюсь загрузить пользовательский шрифт в Pixi.js(2D WebGL framework).

У них есть пример использования шрифтов .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;
...

Ответ 1

Вам необходимо преобразовать HU_A0046.woff с этим инструментом в 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 api с ней вы можете использовать веб-шрифты из Google и других cdns, а также свои собственные локальные веб-шрифты вы можете прочитать больше на 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

Это работало в моем приложении pixi 4 после установки файла .woff (без преобразования или растрового текста) и добавления

font: "24px Open Sans Regular"

к моему определению стиля pixi.

fonts.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 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