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

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.font' в этой спецификации.		 Живой стандарт

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

BCD tables only load in the browser

Особенности 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).

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