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' в этой спецификации.		 Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
fontChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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

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