@fontface を使用した HTML5 でのテキストの描画が初めて機能しない

@font-face 経由でロードされたフォントを使用してキャンバスにテキストを描画すると、最初はテキストが正しく表示されません。これは、ブラウザがまだネットワークからフォントをロードしていないためです。したがって、すでに利用可能なフォントが使用されます。

フォントは使用前にロードする必要があります。これはタグを使用して確認できます。フォントが利用可能で、他の要素がプリロードされていることを確認したい場合は、次のようなタグを使用してこれを行うことができます。

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

また、次のようにフォントをロードすることもできます -

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

以上が@fontface を使用した HTML5 でのテキストの描画が初めて機能しないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。