Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!
CanvasRenderingContext2D
.font
- свойство Canvas 2D API, определяющее текущие стили рисуемого текста. Это строкаа использующая синтаксис CSS font.
Синтаксис
ctx.font = value;
Опции
Примеры
Использование пользовательского 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' в этой спецификации. |
Живой стандарт |
Поддержка браузерами
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 3.5 | IE Полная поддержка 9 | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera 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. Usectx.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