Phông chữ tùy chỉnh trong Pixi.js

Question

Tôi cố gắng tải phông chữ tùy chỉnh vào Pixi.js (khung WebGL 2D).

Họ có một ví dụ sử dụng .woff google phông chữ:

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

tôi chuyển .ttf tôi để .woff và thêm vào 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; 
} 

Nó cho thấy trong div của tôi, nhưng không trong giai đoạn Pixi của tôi.

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

Bạn cần phải chuyển đổi HU_A0046.woff với http://www.angelcode.com/products/bmfont/ công cụ để định dạng HU_A0046.XML và sau đó thêm tên file vào danh sách tải trước. Sau đó, bạn nên gọi PIXI.Bitmaptext

Ví dụ:

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

Để sử dụng một phông chữ web tùy chỉnh với Pixi bạn cần sử dụng google phông chữ web api với nó, bạn có thể sử dụng phông chữ web từ Google và CDN khác cũng như phông chữ web địa phương của bạn bạn có thể đọc thêm tại 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> 

Trong ví dụ này, file fonts.css có thể trông somet hing như thế này:

@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: ...; 
} 

* điều quan trọng để bắt đầu sử dụng các phông chữ sau khi được trả lại

* chuyển đổi phông chữ của bạn với một công cụ như: http://www.font2web.com/

* nó sẽ cung cấp cho bạn các phông chữ web cần thiết các tệp cũng như mã số css cho phông chữ tùy chỉnh của bạn