PixiJS: загрузить собственный шрифт

Question

PixiJS: загрузить собственный шрифт

1

В настоящее время я изучаю Pixijs. Я прошел учебник этого парня: github.com/kittykatattack/learningPixi Хороший, кстати.

Окружение: Xampp, Firefox, Pixijs, HTML, CSS

Сейчас я пытаюсь загрузить собственный шрифт. При первой загрузке страницы, на которой должен выполняться мой проект 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

Как я уже сказал, это сообщение появляется только в первый раз, когда я загружаю свою страницу. Во второй раз все нормально.

Что я могу сделать, чтобы предотвратить это?

Почему это происходит?

Что это означает?

user2857564 14 сен. 2017, в 14:23

Источник

Теги:

javascript

css

fonts

pixi.js

2 ответа

Ещё вопросы

Евгений Шестаков · Answer 1 · 2019-01-21T13-07-00.000Z

Попробуйте использовать PIXI.loader

const loader = new PIXI.loaders.Loader();
loader.add('fffforward', 'assets/fonts/fffforward.TTF');

loader.load((loader, resources) => {
    PointsTopText = new Text(
        "P1: " + PointsTop,
        {fontFamily: 'FFFForward', fontSize: 32, fill: 'white'}
    );
    World.addChild(PointsTopText);
});

tonethar · Answer 2 · 2017-11-15T03-21-00.000Z

Используйте webfontloader - https://github.com/typekit/webfontloader - чтобы синхронно загружать ваши шрифты, прежде чем делать какой-либо рисунок в PixiJS. Это также работает с другими приложениями на основе холста.

В разделе <head> вашей 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>