Pixi.js中的自定義字體

我嘗試將自定義字體載入Pixi.js（2D WebGL框架）。Pixi.js中的自定義字體

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; 
}

它顯示了我的股利而不是

他們使用谷歌.woff字體有一個例子在我的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; 
...

來源

2013-09-25 user1930254

難道是你沒有在行中列出的來源？像'.woff'一樣？ – Brendan

在GoodBoy示例中，他們正在預加載字體，不確定您是否遇到了使用CSS的種族問題。嘗試設置'{font：'160px HU_Adrien，arial「...'，看看你是否至少得到了文本。 –

你需要轉換HU_A0046.woff與http://www.angelcode.com/products/bmfont/工具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; 
...

來源

2014-06-13 05:57:49

爲了使用定製的Web字體與PIXI你需要使用谷歌的Web字體API 有了它，你可以使用網絡字體從谷歌和其他的CDN，以及你自己的本地Web字體你可以閱讀更多的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文件看起來SOMET興這樣的：

@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/

*它會給你所需要的Web字體文件以及css代碼爲您的自定義字體

來源

2015-01-27 08:37:17

Pixi.js中的自定義字體

回答

相關問題