Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Fragen zum Thema HTML, JavaScript, PHP
Antworten
Orioner
Beiträge: 102
Registriert: Mo Dez 10, 2012 10:52 am

Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Beitrag von Orioner » Do Dez 01, 2022 6:54 pm

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?

nufan
Wiki-Moderator
Beiträge: 2557
Registriert: Sa Jul 05, 2008 3:21 pm

Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Beitrag von nufan » Do Dez 01, 2022 9:57 pm

Hallo! :)
Kannst du vielleicht ein minimales Beispiel zur Verfügung stellen, damit man das Problem reproduzieren kann?

Orioner
Beiträge: 102
Registriert: Mo Dez 10, 2012 10:52 am

Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Beitrag von Orioner » Sa Dez 03, 2022 7:43 pm

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:

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>
Die dazugehörige CSS-Datei:

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;
}
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.

nufan
Wiki-Moderator
Beiträge: 2557
Registriert: Sa Jul 05, 2008 3:21 pm

Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Beitrag von nufan » Sa Dez 03, 2022 11:06 pm

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.

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>
Siehe auch: https://developer.mozilla.org/en-US/doc ... ceSet/load

Orioner
Beiträge: 102
Registriert: Mo Dez 10, 2012 10:52 am

Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Beitrag von Orioner » Do Dez 08, 2022 3:56 pm

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.

nufan
Wiki-Moderator
Beiträge: 2557
Registriert: Sa Jul 05, 2008 3:21 pm

Re: Schriftart wird im Canvas erst beim Neuladen der Seite angezeigt

Beitrag von nufan » Do Dez 08, 2022 11:41 pm

Orioner hat geschrieben:
Do Dez 08, 2022 3:56 pm
Ich muss mich übrigens mal mit Pfeil-Funktionen beschäftigen - das ist ein Konzept, das ich bisher nicht verstanden habe.
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>

Antworten