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