Pixi.js

Question

में कस्टम फ़ॉन्ट I Pixi.js (2D WebGL ढांचे) में एक कस्टम फ़ॉन्ट लोड करने का प्रयास करें।

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

मैं .woff और सीएसएस में जोड़ा करने के लिए अपने .ttf परिवर्तित:

@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 में पता चलता है, लेकिन नहीं

वे .woff फोंट गूगल का उपयोग करते हुए एक उदाहरण है मेरे पिक्सी मंच में।

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

Answer 1

आप http://www.angelcode.com/products/bmfont/ उपकरण को HU_A0046.XML प्रारूप के साथ HU_A0046.woff परिवर्तित और फिर प्रीलोड सूची में फ़ाइल नाम जोड़ने की जरूरत है। तो फिर तुम फोन करना चाहिए 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; 
... 

Answer 2

आदेश PIXI के साथ एक कस्टम वेब फ़ॉन्ट उपयोग करने के लिए आप इसके साथ गूगल वेब फ़ॉन्ट एपीआई उपयोग करने के लिए आप से वेब फोंट का उपयोग कर सकते जरूरत में गूगल और अन्य 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 फ़ाइल somet लग सकता है इस तरह hing:

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

* यह आप की जरूरत वेब फ़ॉन्ट दे देंगे फ़ाइलों के साथ-साथ सीएसएस आपके कस्टम फ़ॉन्ट्स के लिए कोड