Dessiner du texte en HTML5 à l'aide de @fontface ne fonctionne pas du premier coup

Dessiner du texte dans le canevas à l'aide d'une police chargée via @font-face n'affiche pas correctement le texte au début. Cela est dû au fait que le navigateur n'a pas encore chargé la police depuis le réseau. Par conséquent, il utilise des polices déjà disponibles.

Les polices doivent être chargées avant utilisation. Cela peut être assuré à l’aide de la balise. Si vous voulez vous assurer que la police est disponible et que d'autres éléments sont préchargés, vous pouvez le faire en utilisant la balise comme indiqué ci-dessous

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

Vous pouvez également charger la police comme ceci -

var newFont = new FontFace(‘New Font', 'url(https://samplefont.woff2)');  
newFont.load().then(function(font){  
   document.fonts.add(font);  
   alert('Font successfully loaded!');  
});                  

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!