HTML canvas font attribute

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

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

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

font грамматика свойств использования CSS свойство fontодинаково

пример

Напишите на канвасе фрагмент текста шириной 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

Определяет стиль шрифта. Возможные значения:

  • нормальный
  • курсив
  • наклонный
font-variant

Определяет вариацию шрифта. Возможные значения:

  • нормальный
  • маленькие заглавные буквы
font-weight

Определяет толщину шрифта. Возможные значения:

  • нормальный
  • жирный
  • толще
  • легче
  • 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

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

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