HTML canvas font 屬性

HTML5 Canvas 參考手冊

定義和用法

font 屬性設置或返回畫布上文本內容的當前字體屬性。

font 屬性使用的語法與 CSS font 屬性相同。

實例

在畫布上寫一段 40 像素的文本，使用的字體是 "Arial"：

Your browser does not support the canvas tag.

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

注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

HTML5 Canvas 參考手冊