font¶

Свойство font устанавливает или возвращает свойства шрифта для текстового содержимого на холсте.

Свойство font объекта canvas использует тот же синтаксис, что и CSS свойство font.

Синтаксис¶

context.font="italic small-caps bold 12px arial";

Значение по умолчанию: 10px sans-serif

font-style: Определяет стиль шрифта. Возможные значения: normal, italic, oblique
font-variant: Определяет способ представления строчных букв. Возможные значения: normal, small-caps
font-weight: Определяет "жирность" шрифта. Возможные значения: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-size/line-height: Определяет размер шрифта и расстояние между строк, в пикселях
font-family: Определяет семейство шрифта
caption: Использовать шрифт для текста элементов форм вроде кнопок
icon: Использовать шрифт для текста под иконками
menu: Использовать шрифт применяемый в меню
message-box: Использовать шрифт для диалоговых окон
small-caption: Использовать шрифт для подписей к небольшим элементам управления
status-bar: Использовать шрифт для строки состояния окон

Напишем текст в элементе <canvas> используя шрифт Arial размером 30px:

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.font = '30px Arial'
ctx.fillText('Hello World', 10, 50)