PixiJS: Charger la police personnalisée

J'apprends actuellement Pixijs. Je suis passé par le tutoriel de ce type: github.com/kittykatattack/learningPixi Nice one btw.PixiJS: Charger la police personnalisée

Environement: Xampp, Firefox, Pixijs, HTML, CSS

Maintenant, je tente de charger une police personnalisée. La première fois que je charge la page où mon projet Pixijs doit s'exécuter, les polices ne s'affichent pas et la console affiche des messages d'erreur ... La deuxième fois que je charge la page (sans supprimer le cache) le texte s'affiche avec la police donnée!

Pourquoi ?!

Voici les extraits pour le chargement de la police:

index.html:

<head> 
    <meta charset='UTF-8' /> 
    <style> 
     @font-face{ 
      font-family: "FFFForward"; 
      src: url("assets/fonts/fffforward.TTF"); 
     } 

     * {padding: 0; margin: 0} 
    </style>

app.js:

function DrawText(){ 

PointsTopText = new Text(
    "P1: " + PointsTop, 
    {fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'} 
); 
PointsBotText = new Text(
    "Cpu: " + PointsBot, 
    {fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'} 
); 

PointsTopText.position.set(0, Renderer.height/2 - 32 * 2); 
PointsBotText.position.set(0, Renderer.height/2); 

World.addChild(PointsTopText); 
World.addChild(PointsBotText); 
}

Voici le journal des erreurs du console:

console:

downloadable font: bad search range (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: bad range shift (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: cmap: bad id_range_offset (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: hdmx: the table should not be present when bit 2 and 4 of the head->flags are not set (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14 
downloadable font: hdmx: Table discarded (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14

Comme je l'ai dit, ce message apparaît que la première fois que je charge ma page. La deuxième fois tout va bien.

Que puis-je faire pour éviter cela?

Pourquoi cela se produit-il?

Quelle est la signification de ceci?

Source

2017-09-14 user2857564

Utilisez webfontloader - https://github.com/typekit/webfontloader - pour charger de manière synchrone vos polices avant vous pouvez dessiner dans PixiJS. Cela fonctionne également avec d'autres applications sur canevas.

Mettez ce qui suit dans la tête <> de votre page HTML:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
<script> 
    WebFont.load({ 
     google: { 
      families: ['Press Start 2P'] 
     }, 
     active:e=>{ 
      console.log("font loaded!"); 
      // now start setting up your PixiJS (or canvas) stuff! 
     } 
    }); 
</script>

Source

2017-11-15 04:40:39 tonethar

PixiJS: Charger la police personnalisée

Répondre

Questions connexes