CanvasRenderingContext2D: font-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.font-Eigenschaft der Canvas 2D-API gibt den aktuellen Textstil an, der beim Zeichnen von Text verwendet wird. Dieser String verwendet dieselbe Syntax wie der CSS font-Spezifizierer.

Wert

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

Beispiele

Verwendung einer benutzerdefinierten Schriftart

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

HTML

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

JavaScript

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

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

Ergebnis

Laden von Schriften mit der CSS Font Loading API

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

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

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

Spezifikationen

Specification
HTML Standard
# dom-context-2d-font-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch