CanvasRenderingContext2D.font

CanvasRenderingContext2D.font – свойство Canvas 2D API, определяющее  текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS 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);

Результат

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

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

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

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

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

Поддержка браузерами

Особенности Gecko

• Браузеры на основе 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