Canvas font 属性
示例
在画布上写一个 30px 高的文本，使用“Arial”字体
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
自己动手试一试 »
描述
font 属性设置或返回 canvas 文本的字体属性。
font 属性使用与 CSS font 属性相同的语法。
默认值为 10px sans-serif。
另请参阅
fillStyle 属性 (设置文本颜色/渐变)
textAlign 属性 (设置文本对齐方式)
textBaseline 属性 (设置文本基线)
fillText() 方法 (绘制文本)
strokeText() 方法 (绘制文本)
语法
| context.font = "italic small-caps bold 12px arial" |
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| font-style |
|
试一试 » |
| font-variant |
|
试一试 » |
| font-weight |
|
试一试 » |
| font-size | 像素字体大小 | 试一试 » |
| font-family | 字体系列 | 试一试 » |
| 标题 | 使用按钮中使用的字体 | 试一试 » |
| icon | 使用用于标记图标的字体 | 试一试 » |
| 菜单 | 使用菜单中使用的字体 | 试一试 » |
| 消息框 | 使用对话框中使用的字体 | 试一试 » |
| 小标题 | 用于标记小型控件的字体 | 试一试 » |
| 状态栏 | 使用窗口状态栏中使用的字体 | 试一试 » |
浏览器支持
<canvas> 元素是 HTML5 标准（2014）。
font 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
