CanvasRenderingContext2D.font

Baseline 2025
Newly available

Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CanvasRenderingContext2D.font – свойство Canvas 2D API, определяющее текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS font.

Синтаксис

ctx.font = value;

Опции

value

Строка DOMString с разобранным CSS font значением. Значение по умолчанию – "10px sans-serif".

Примеры

Использование пользовательского шрифта

Этот пример задаёт в свойстве font другие font-size и font-family.

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

Результат

Загрузка шрифта с помощью CSS Font Loading API

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

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

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

Спецификации

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

Совместимость с браузерами

Смотрите также