Das Zeichnen von Text in HTML5 mit @fontface funktioniert beim ersten Mal nicht

Beim Zeichnen von Text im Canvas mit einer über @font-face geladenen Schriftart wird der Text zunächst nicht korrekt angezeigt. Dies liegt daran, dass der Browser die Schriftart noch nicht aus dem Netzwerk geladen hat. Daher werden Schriftarten verwendet, die bereits verfügbar sind.

Schriftarten müssen vor der Verwendung geladen werden. Dies kann über das Tag sichergestellt werden. Wenn Sie sicherstellen möchten, dass die Schriftart verfügbar ist und einige andere Elemente vorinstalliert sind, können Sie dies mit dem unten gezeigten Tag tun

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

Sie können die Schriftart auch so laden -

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

Das obige ist der detaillierte Inhalt vonDas Zeichnen von Text in HTML5 mit @fontface funktioniert beim ersten Mal nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!