Canvas font attribute

Руководство по Canvas

Определение и использование

font свойство устанавливает или возвращает текущие свойства шрифта текста на канвасе.

font Синтаксис свойств, используемых в Свойство font CSSСовпадает.

Пример

Напишите на канвасе текст 40 пикселей, используя шрифт "Arial":

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

JavaScript:

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

Попробуйте сами

Синтаксис

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 Используйте шрифт для строки состояния окна.

Технические детали

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

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Примечание:Интернет-эксплорер 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство по Canvas