CanvasRenderingContext2D.font

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 = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);

结果

使用CSS字体加载API加载字体

借助FontFace API的帮助,您可以在画布中使用字体之前显式加载字体。

let f = new FontFace('test', 'url(x)');

f.load().then(function() {
  // Ready to use the font in a canvas context
});

规范描述

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 。不要使用此属性。
  • 在Gecko中,当将系统字体设置为canvas 2D上下文的font(例如菜单)的值时,获取用于无法返回期望字体的字体值 (不返回任何内容)。 这已在Firefox 57(bug 1374885)中发布的Firefox的Quantum/Stylo并行CSS引擎中修复。

参见