Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Hi. Ich benutze in meinem JavaScript-Spiel im Canvas eine bestimmt Schriftart. Nun habe ich das Problem, dass, wenn ich die Seite lade, immer die Standardschriftart (ich glaube "Time New Roman") angezeigt wird. Erst beim Neuladen der Seite (quasi, wenn genug Zeit war, die benutzerdefinierte Schriftart zu laden) wird der Text in der von mir festgelegten Schriftart angezeigt. Kennt jemand das Problem und/oder hat einen Tipp für mich, wie ich das Problem (was vermutlich ein "Ladezeit-Problem" ist) umgehen kann?
Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Hallo! 
Kannst du vielleicht ein minimales Beispiel zur Verfügung stellen, damit man das Problem reproduzieren kann?
Kannst du vielleicht ein minimales Beispiel zur Verfügung stellen, damit man das Problem reproduzieren kann?
Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Nun habe ich es endlich geschafft, ein Minimal-Beispiel bereitzustellen. Ich hatte in den letzten Tagen viel zu tun, daher ging es nicht schneller.
HTML inkl. JavaScript:
Die dazugehörige CSS-Datei:
Ich halte fest, dass ihr (in diesem Beispiel) die Datei Jura-VariableFont_wght.ttf im selben Ordner liegen haben müsst, wie die HTML- und die CSS-Datei. Ihr bekommt die Datei über https://fonts.google.com/?query=jura und könnt das Beispiel nachvollziehen mit einer beliebigen Schriftart, welche nicht zu den Standardschriftarten eures Betriebssystems gehört (in meinem Fall Jura). Gleichwohl könnt ihr eine Schriftart in einem anderen Schriftarten-Dateiformat probieren, z.B. "otf", "woff" oder "woff2". Ausgeschlossen sind "eot" (nur kompatibel mit Internet Explorer) und "svg" (nicht kompatibel mit Google Chrome).
Für Hinweise und Ideen, wie ich die Ladezeitverzögerung umgehen kann, bzw. dafür sorgen kann, dass die korrekte Schriftart gleich beim ersten Laden der Seite richtig angezeigt wird, würde ich mich sehr freuen.
HTML inkl. JavaScript:
Code: Alles auswählen
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startrade</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="myCanvas">Your browser does not support the canvas element.</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "black";
ctx.font = "13px Conv_Jura-Light";
ctx.fillText("Test-Text", 100, 100);
</script>
</body>
</html>Code: Alles auswählen
@font-face {
font-family: "Conv_Jura-Light";
src: url("Jura-VariableFont_wght.ttf") format("truetype");
}
* {
margin: 0;
overflow: hidden;
}
#myCanvas {
margin: 0 auto;
display: block;
}Für Hinweise und Ideen, wie ich die Ladezeitverzögerung umgehen kann, bzw. dafür sorgen kann, dass die korrekte Schriftart gleich beim ersten Laden der Seite richtig angezeigt wird, würde ich mich sehr freuen.
Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Vielen Dank für das Beispiel, ich konnte das Problem erfolgreich reproduzieren. Eine Möglichkeit wäre, die Font explizit zu laden und den Text erst bei Erfolg anzuzeigen.
Siehe auch: https://developer.mozilla.org/en-US/doc ... ceSet/load
Code: Alles auswählen
<script>
var canvasFont = "13px Conv_Jura-Light";
document.fonts.load(canvasFont).then(
(value) => {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "black";
ctx.font = canvasFont;
ctx.fillText("Test-Text", 100, 100);
},
(error) => {
console.log("Error loading font");
}
);
</script>
Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Prima, das hat funktioniert! Ich habe es ein wenig umgeschrieben und an meinen Code angepasst. Und es funktioniert. Vielen herzlichen Dank dafür! Ich muss mich übrigens mal mit Pfeil-Funktionen beschäftigen - das ist ein Konzept, das ich bisher nicht verstanden habe.
Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt
Damit definierst du Lambda-Funktionen, die dann als Parameter übergeben werden. Alternativ kannst du das ganze auch ohne Lambdas so schreiben:
Code: Alles auswählen
<script>
function onFontLoaded(value) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "black";
ctx.font = canvasFont;
ctx.fillText("Test-Text", 100, 100);
}
function onFontError(error) {
console.log("Error loading font");
}
var canvasFont = "13px Conv_Jura-Light";
document.fonts.load(canvasFont).then(
onFontLoaded,
onFontError
);
</script>