CanvasRenderingContext2D.font
CanvasRenderingContext2D.font
– свойство Canvas 2D API, определяющее текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS font.
Синтаксис
ctx.font = value;
Опции
Примеры
Использование пользовательского шрифта
Этот пример задаёт в свойстве 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
});
Спецификации
Specification |
---|
HTML Standard # dom-context-2d-font-dev |
Поддержка браузерами
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).
Смотрите также
- Интерфейс, определяющий это свойство:
CanvasRenderingContext2D