CanvasRenderingContext2D.font

ctx.font = value;

value

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

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

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

Результат

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

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

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

• Браузеры на основе Gecko, например Firefox, имеют не стандартное и устаревшее свойство ctx.mozTextStyle. Используйте ctx.font вместо него.
• In Gecko, when setting a system font as the value of a canvas 2D context's font (e.g., menu), getting the font value used to fail to return the expected font (it returns nothing). This is fixed in Firefox's Quantum/Stylo parallel CSS engine, released in Firefox 57 (баг 1374885).

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