We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CanvasRenderingContext2D.font

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

语法

ctx.font = value;

选项

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

示例

使用 font 属性

这是一段使用 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);

修改下面的代码并在线查看canvas的变化:

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.font
Living Standard  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.5 (1.9.1) 9 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.9.1) (Yes) (Yes) (Yes)

Gecko-specific 注解

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

参见

文档标签和贡献者

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