HTML canvas font 屬性

Canvas 對象參考手冊 Canvas 對象

實例

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

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

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

嘗試一下 ?

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 font 屬性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定義和用法

font 屬性設(shè)置或返回畫布上文本內(nèi)容的當前字體屬性。

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

默認值： 10px sans-serif
JavaScript 語法： context.font="italic small-caps bold 12px arial";

屬性值

值 描述
font-style規(guī)定字體樣式?？赡艿闹担?ul>
  • normal
  • italic
  • oblique
    • font-variant規(guī)定字體變體?？赡艿闹担?ul>
  • normal
  • small-caps
    • font-weight規(guī)定字體的粗細?？赡艿闹担?ul>
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
    • font-size/line-height規(guī)定字號和行高，以像素計。
    font-family規(guī)定字體系列。
    caption使用標題控件的字體（比如按鈕、下拉列表等）。
    icon使用用于標記圖標的字體。
    menu使用用于菜單中的字體（下拉列表和菜單列表）。
    message-box使用用于對話框中的字體。
    small-caption使用用于標記小型控件的字體。
    status-bar使用用于窗口狀態(tài)欄中的字體。

    Canvas 對象參考手冊 Canvas 對象