CanvasRenderingContext2D.font

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

Синтаксис

ctx.font = value;

Опции

value

A DOMString parsed as CSS font value. Значение по умолчанию - "font is 10px sans-serif".

Примеры

Использование пользовательского font

Этот пример задает в своействе 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);

Результат

Загрузка font с помощью 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-specific notes

• In Gecko-based browsers, such as Firefox, a non-standard and deprecated property ctx.mozTextStyle is implemented besides this property. Use ctx.font instead.
• 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