Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

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


ctx.font = value;


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


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

Этот пример задает в своействе font другие font-size и font-family.


<canvas id="canvas"></canvas>


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


Спецификация Статус Комментарий
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-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).

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