Javascript свойство font

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

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

Значение по умолчанию: 10px sans-serif
JavaScript синтаксис: context.font="italic small-caps bold 12px arial";

Возможные значения

Значение Описание
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:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


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