2017年4月18日 英超 米德尔斯堡vs阿森纳 视频集锦

Baseline 2025
Newly available
百度 ”　　中国湖南善禧文化股份有限公司第一次参加日本国际动漫展，带来不少“中国风”的动画周边产品。

Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.

Value

A string parsed as CSS font value. The default font is 10px sans-serif.

Examples

Using a custom font

In this example we use the font property to specify a custom font weight, size, and family.

HTML

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

JavaScript

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

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

Result

Loading fonts with the CSS Font Loading API

With the help of the FontFace API, you can explicitly load fonts before using them in a canvas.

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

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

Specifications

Specification
HTML
# dom-context-2d-font-dev

Browser compatibility

See also