Le dessin du texte <canvas> avec @font-face ne fonctionne pas la première fois

Dessin sur la toile qui doit arriver et de revenir immédiatement lorsque vous appelez la fillText méthode. Toutefois, le navigateur n'a pas encore chargés de la police à partir du réseau, ce qui est une tâche de fond. Donc, il doit revenir à la police, elle ne disponibles.

Si vous voulez assurez-vous que la police est disponible, avoir un autre élément sur la page de la précharge, par exemple.:

<div style="font-family: PressStart;">.</div>

Là le cœur du problème est que vous essayez d'utiliser la police, mais le navigateur n'a pas chargé de encore et, éventuellement, n'a même pas demandé. Ce que vous avez besoin est quelque chose qui se charge de la police et de vous donner un rappel une fois qu'il est chargé; une fois que vous obtenez le rappel, vous savez qu'il est acceptable d'utiliser la police de caractères.

Regarder Google WebFont Chargeur; il semble comme un "custom" prestataire et un active de rappel après la charge de la faire fonctionner.

Je n'ai jamais utilisé avant, mais à partir d'une analyse rapide de la documentation vous avez besoin de faire un fichier css fonts/pressstart2p.css, comme ceci:

@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: normal;
src: local('Press Start 2P'), url('http://lemon-factory.net/reproduce/fonts/Press Start 2P.ttf') format('ttf');
}

Puis ajouter l'JS:

  WebFontConfig = {
custom: { families: ['Press Start 2P'],
urls: [ 'http://lemon-factory.net/reproduce/fonts/pressstart2p.css']},
active: function() {
/* code to execute once all font families are loaded */
console.log(" I sure hope my font is loaded now. ");
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

Vous pouvez charger des polices avec le FontFace API avant de l'utiliser dans la toile:

const myFont = new FontFace('My Font', 'url(https://myfont.woff2)');
myFont.load().then((font) => {
document.fonts.add(font);
console.log('Font loaded');
});

La ressource de police myfont.woff2 est d'abord téléchargé. Une fois le téléchargement terminé, la police est ajoutée au document de FontFaceSet.

La spécification de la FontFace API est un projet de travail à la rédaction de ce document. Voir tableau de compatibilité du navigateur ici.

je suis tombé sur le problème lors de la lecture avec elle récemment http://people.opera.com/patrickl/experiments/canvas/scroller/

travaillé autour d'elle en ajoutant à font-family toile directement dans le CSS, donc vous pouvez simplement ajouter

toile { font-family: PressStart; }

J'ai écrit un jsfiddle intégrant la plupart des corrections suggérées ici, mais aucun n'a résolu le problème. Cependant, je suis un programmeur novice alors peut-être n'a pas de code les corrections suggérées correctement:

http://jsfiddle.net/HatHead/GcxQ9/23/

HTML:

<!-- you need to empty your browser cache and do a hard reload EVERYTIME to test this otherwise it will appear to working when, in fact, it isn't -->
<h1>Title Font</h1>
<p>Paragraph font...</p>
<canvas id="myCanvas" width="740" height="400"></canvas>

CSS:

@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);
@import url(http://fonts.googleapis.com/css?family=Rock+Salt);
canvas {
font-family:'Rock Salt', 'Architects Daughter'
}
.wf-loading p {
font-family: serif
}
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family:'Architects Daughter', serif;
font-size: 24px;
font-weight: bold;
}
.wf-loading h1 {
font-family: serif;
font-weight: 400;
font-size: 42px
}
.wf-inactive h1 {
font-family: serif;
font-weight: 400;
font-size: 42px
}
.wf-active h1 {
font-family:'Rock Salt', serif;
font-weight: 400;
font-size: 42px;
}

JS:

//do the Google Font Loader stuff....
WebFontConfig = {
google: {
families: ['Architects Daughter', 'Rock Salt']
}
};
(function () {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
//play with the milliseconds delay to find the threshold - don't forget to empty your browser cache and do a hard reload!
setTimeout(WriteCanvasText, 0);
function WriteCanvasText() {
//write some text to the canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "normal" + " " + "normal" + " " + "bold" + " " + "42px" + " " + "Rock Salt";
context.fillStyle = "#d50";
context.fillText("Canvas Title", 5, 100);
context.font = "normal" + " " + "normal" + " " + "bold" + " " + "24px" + " " + "Architects Daughter";
context.fillText("Here is some text on the canvas...", 5, 180);
}

Solution de contournement
J'ai finalement cédé et, sur la première charge, utilisé une image du texte en plus de positionner le texte avec la police-est confrontée à l'extérieur de la toile zone d'affichage. Tous les écrans de la police-les visages dans la toile de la zone d'affichage travaillé pas de problème. Ce n'est pas une élégante solution de contournement par tous les moyens.

La solution est cuit dans mon site mais si quelqu'un a besoin je vais essayer de créer un jsfiddle à démontrer.

Tout d'abord l'utilisation de Google Web fonts chargeur comme cela a été conseillé dans l'autre réponse et ajouter votre code de dessin à la fonction de rappel qu'il fournit à indiquer les polices ont été chargés. Cependant, ce n'est pas la fin de l'histoire. À partir de ce moment, il est très navigateur dépendante. La plupart du temps, cela fonctionnera très bien, mais parfois il peut être nécessaire d'attendre quelques centaines de millisecondes ou utiliser les polices quelque part sur la page. J'ai essayé les différentes options et l'une méthode qui, autant que je sache fonctionne toujours est de dessiner rapidement des messages de test dans la zone de travail avec la famille de police et taille de police combinaisons que vous allez utiliser. Vous pouvez le faire avec la même couleur que l'arrière-plan, de sorte qu'ils ne seront pas visible et cela va arriver très vite. Après que les polices toujours travaillé pour moi et dans tous les navigateurs.

Faces d'un même problème. Après la lecture de "bobince" et autres commentaires, j'utilise javascript suivant pour le contourner :

$('body').append("<div id='loadfont' style='font-family: myfont;'>.</div>");
$('#loadfont').remove();

La toile est tiré de la DOM de chargement. La précharge technique ne fonctionne que si la toile est établi après la précontrainte.

Ma solution, même si elle n'est pas la meilleure:

CSS:

.preloadFont {
font-family: 'Audiowide', Impact, Charcoal, sans-serif, cursive;
font-size: 0;
position: absolute;
visibility: hidden;
}

HTML:

<body onload="init()">
<div class="preloadFont">.</div>
<canvas id="yourCanvas"></canvas>
</body>

JavaScript:

function init() {
myCanvas.draw();
}

Ajouter un délai que ci-dessous

<script>
var c = document.getElementById('myCanvas');    
var ctx = c.getContext('2d');
setTimeout(function() {
ctx.font = "24px 'Proxy6'"; //uninstalled @fontface font style 
ctx.textBaseline = 'top';
ctx.fillText('What!', 20, 10);      
}, 100); 
</script>