CanvasRenderingContext2D: свойство font

Свойство CanvasRenderingContext2D.font API холста 2D определяет текущий стиль текста, который будет использоваться при отрисовке текста. Эта строка использует тот же синтаксис, что и спецификатор CSS font.

Строка, интерпретируемая как значение CSS font. По умолчанию шрифт равен 10px sans-serif.

В этом примере мы используем свойство font для задания пользовательского начертания, размера и семейства шрифтов.

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);

Результат

С помощью API FontFace вы можете явно загрузить шрифты перед их использованием в холсте.

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

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

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D