Canvas font 属性

定义和用法

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

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

ChromeEdgeFirefoxSafariOpera
ChromeEdgeFirefoxSafariOpera
4.09.03.64.010.1

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