画布 字体 属性
示例
在画布上用“Arial”字体编写 30px 高的文本
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
亲自试一试 »
描述
该 font 属性设置或返回画布文本的字体属性。
该 font 属性使用与 CSS front 属性 相同的语法。
默认值为 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 | 字体系列 | 试玩一下 » |
| caption | 使用按钮中使用的字体 | 试玩一下 » |
| icon | 使用用于标记图标的字体 | 试玩一下 » |
| menu | 使用菜单中使用的字体 | 试玩一下 » |
| message-box | 使用对话框中使用的字体 | 试玩一下 » |
| small-caption | 使用用于标记小型控件的字体 | 试玩一下 » |
| status-bar | 使用窗口状态栏中使用的字体 | 试玩一下 » |
浏览器支持
该 <canvas> 元素是 HTML5 标准 (2014)。
font 在所有现代浏览器中受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ 画布参考
