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