Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: boxa6
Обновлялась последний раз: boxa6,