CanvasRenderingContext2D: font-Eigenschaft

Wert

Ein String, der als CSS font-Wert geparst wird. Die Standard-Schriftart ist 10px sans-serif.

Beispiele

Verwenden einer benutzerdefinierten Schriftart

In diesem Beispiel verwenden wir die font-Eigenschaft, um ein benutzerdefiniertes Schriftgewicht, eine Größe und eine Familie anzugeben.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);

Ergebnis

Laden von Schriftarten mit der CSS Font Loading API

Mit Hilfe der FontFace API können Sie Schriftarten explizit laden, bevor Sie sie in einem Canvas verwenden.

let f = new FontFace("test", "url(x)");

f.load().then(() => {
  // Ready to use the font in a canvas context
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das Interface, das diese Eigenschaft definiert: CanvasRenderingContext2D