Pixi.js의 사용자 정의 글꼴

Question

Pixi.js (2D WebGL 프레임 워크)에 사용자 정의 글꼴을로드하려고합니다.

https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text 내가 .woff과 CSS에 추가 내 .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; 
} 

그것은 내 사업부에 표시하지만

그들은 .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; 
... 

Answer 1

당신은 http://www.angelcode.com/products/bmfont/ 도구 에 HU_A0046.XML 형식 에게 HU_A0046.woff를 변환 한 후 프리로드 목록에 파일 이름을 추가해야합니다. 그럼 당신은 호출해야 PIXI.Bitmaptext

예 :

당신이에서 웹 글꼴을 사용할 수 있습니다 함께 구글 웹 폰트 API를 를 사용할 필요가 PIXI와 사용자 정의 웹 폰트를 사용하려면

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

구글과 다른 CDN을뿐만 아니라 자신의 로컬 웹 글꼴이 예에서 더에서 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/

* 그것은 당신에게 필요한 웹 글꼴을 줄 것이다 파일뿐만 아니라 css 사용자 정의 글꼴 코드