Properti font kanvas HTML

Referensi Kanvas HTML

Contoh

Tulis teks setinggi 30px di kanvas, menggunakan font "Arial":

Peramban Anda tidak mendukung kanvas HTML5.

JavaScript:

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

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Property
font Yes 9.0 Yes Yes Yes

Definisi dan Penggunaan

Properti font mengatur atau mengembalikan properti font saat ini untuk konten teks di kanvas.

Properti font menggunakan sintaks yang sama dengan properti font CSS .

Nilai bawaan: 10px sans-serif
Sintaks JavaScript: context .font="italic small-caps bold 12px arial";

Nilai properti

Values Description Play it
font-style Specifies the font style. Possible values:
  • normal
  • italic
  • oblique
font-variant Specifies the font variant. Possible values:
  • normal
  • small-caps
font-weight Specifies the font weight. Possible values:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size/line-height Specifies the font size and the line-height, in pixels
font-family Specifies the font family
caption Use the font captioned controls (like buttons, drop-downs, etc.)
icon Use the font used to label icons
menu Use the font used in menus (drop-down menus and menu lists)
message-box Use the font used in dialog boxes
small-caption Use the font used for labeling small controls
status-bar Use the fonts used in window status bar

Referensi Kanvas HTML