CanvasRenderingContext2D: font 属性
Canvas 2D API 的 CanvasRenderingContext2D.font 属性用于指定绘制文本时使用的当前文本样式。此字符串使用与 CSS font 说明符相同的语法。
值
一个被解析为 CSS font 值的字符串。默认字体为 10px sans-serif。
示例
使用自定义字体
在此示例中，我们使用 font 属性来指定自定义的字体粗细、大小和字体系列。
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);
结果
使用 CSS Font Loading API 加载字体
借助 FontFace API，您可以在画布中使用它们之前显式加载字体。
js
let f = new FontFace("test", "url(x)");
f.load().then(() => {
// Ready to use the font in a canvas context
});
规范
| 规范 |
|---|
| HTML # dom-context-2d-font-dev |
浏览器兼容性
加载中…
另见
- 定义此属性的接口：
CanvasRenderingContext2D