Flashgamedev.ru | Разработка и Монетизация Флэш игр
http://flashgamedev.ru/

Phaser. Как подключить TTF-шрифт?
http://flashgamedev.ru/viewtopic.php?f=20&t=13491
Страница 1 из 1

Автор:  eXAAAXe [ Чт июл 20, 2017 5:59 pm ]
Заголовок сообщения:  Phaser. Как подключить TTF-шрифт?

1. Конвертирую .ttf в веб-шрифты: http://www.font2web.com

2. css-файл такой:

Код:
@font-face {
    font-family: 'Conv_junegull rg';
    src: url('../fonts/junegull rg.eot');
    src: url('../fonts/junegull rg.eot?#iefix') format('embedded-opentype'),
         url('../fonts/junegull rg.woff') format('woff'),
         url('../fonts/junegull rg.ttf') format('truetype'),
         url('../fonts/junegull rg.svg#Conv_junegull rg') format('svg');
    font-weight: normal;
    font-style: normal;

}


3. html-файл такой имеет вид:

Код:
<!DOCTYPE html>

<head>

   <link rel="fontPreload" type = "text/css" href = "assets/css/fontPreload.css">
   
   <style type="text/css">
      @font-face { font-family: 'Conv_junegull rg'; src: url('assets/fonts/junegull rg.ttf') format("truetype"); }
      body{
         background: #000000;
         padding:0px;
         margin:0px;
      }
         .fontPreload {
           font-family: 'Conv_junegull rg';
           position:absolute;
           left:-100px;
      }
   </style>
   
   
    <meta charset="utf-8">
    <title>My Game</title>
    <link rel="shortcut icon" href="/favicon.ico" />

</head>

<body>
    <div class="fontPreload">.</div>
   
    <div id="game"></div>

    <script src="//github.com/photonstorm/phaser-ce/releases/download/v2.8.1/phaser.min.js"></script>
    <script src="js/Game.js"></script>
</body>

</html>


4. Код такой:

Код:
var LText = game.add.text(game.world.width / 2, game.world.height / 2 - 150, 'Test Font', {
            font: '55px junegull rg',
            fill: '#FFFFFF',
            stroke: '#000000',
                strokeThickness: 3,
                align: 'center'
        });
         
LText.font = 'junegull rg';



В итоге вижу что шрифт самый обычный.

ЧЯДНТ?

Автор:  TheRabbit [ Чт июл 20, 2017 6:09 pm ]
Заголовок сообщения:  Re: Phaser. Как подключить TTF-шрифт?

Ты придумал подключаемому шрифту в CSS имя "Conv_junegull rg", а почему-то используешь в JS коде "junegull rg"

Автор:  eXAAAXe [ Чт июл 20, 2017 6:14 pm ]
Заголовок сообщения:  Re: Phaser. Как подключить TTF-шрифт?

Это "фэмили шрифта", а не имя. Или я ошибаюсь?
Мне тулза из пункта 1 сгенерила такое имя.

Автор:  abyss [ Чт июл 20, 2017 6:25 pm ]
Заголовок сообщения:  Re: Phaser. Как подключить TTF-шрифт?

viewtopic.php?f=20&t=13304

Автор:  eXAAAXe [ Чт июл 20, 2017 6:52 pm ]
Заголовок сообщения:  Re: Phaser. Как подключить TTF-шрифт?

Переименовал и заработало. Благодарю. :)

Автор:  TheRabbit [ Чт июл 20, 2017 7:44 pm ]
Заголовок сообщения:  Re: Phaser. Как подключить TTF-шрифт?

eXAAAXe писал(а):
Переименовал и заработало. Благодарю. :)

Заработало потому, что так работает CSS/HTML. Если ты создаешь кастомный шрифт, то ты ему задаешь font-family. Соотв только по этому font-family ты можешь к нему обращаться.

Страница 1 из 1 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/