CanvasRenderingContext2D.font 是 Canvas 2D API 描述绘制文字时,当前字体样式的属性。 使用和 CSS font 规范相同的字符串值。

语法

ctx.font = value;

选项

value
符合CSS font 语法的DOMString 字符串。默认字体是 10px sans-serif。

示例

使用自定义字体

这个例子使用 font 属性设置了不同的字体大小和字体种类。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);

结果

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.font
Living Standard  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fontChrome Full support YesEdge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Gecko-specific 注解

  • 基于Gecko的浏览器, 例如 Firefox, 实现了一个非标准的并且不赞成使用的属性 ctx.mozTextStyle 。不要使用此属性。

参见

文档标签和贡献者

此页面的贡献者: zhangchen, mdnwebdocs-bot, ice-i-snow
最后编辑者: zhangchen,