CanvasRenderingContext2D: font 属性

基线 广泛可用

此功能已十分成熟，在许多设备和浏览器版本中均可正常使用。它自 2015 年 7 月.

报告反馈

值

Canvas 2D API 的 **CanvasRenderingContext2D.font** 属性指定在绘制文本时要使用的当前文本样式。此字符串使用与 CSS font 指定符相同的语法。

示例

解析为 CSS font 值的字符串。默认字体为 10px sans-serif。

使用自定义字体

HTML

在此示例中，我们使用 font 属性来指定自定义字体粗细、大小和族。
<canvas id="canvas"></canvas>

JavaScript

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

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

js

结果

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

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

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

规范

借助 FontFace API，您可以在将字体用于画布之前显式加载它们。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-font-dev

另请参阅