Canvas font属性详解，掌握字体大小、字体族、字体样式、字体粗细等设置方法。font属性设置文本的字体样式，语法与CSS font属性相同。
ctx.font = 'font-style font-weight font-size font-family'
| 属性 | 说明 | 示例 |
|---|---|---|
| font-style | 字体样式 | normal, italic, oblique |
| font-weight | 字体粗细 | normal, bold, 100-900 |
| font-size | 字体大小 | 16px, 1.5em |
| font-family | 字体族 | Arial, sans-serif |
ctx.font = '20px Arial'
ctx.font = 'bold 24px Georgia'
ctx.font = 'italic bold 18px Times New Roman'
ctx.font = '12px Arial' // 12像素
ctx.font = '20px Arial' // 20像素
ctx.font = '1.5em Arial' // 相对大小
ctx.font = 'normal 20px Arial' // 正常
ctx.font = 'bold 20px Arial' // 粗体
ctx.font = '100 20px Arial' // 极细
ctx.font = '900 20px Arial' // 极粗
ctx.font = 'normal 20px Arial' // 正常
ctx.font = 'italic 20px Arial' // 斜体
ctx.font = 'oblique 20px Arial' // 倾斜
常用Web安全字体：
ctx.font = '20px Arial, sans-serif'
ctx.font = '20px Georgia, serif'
ctx.font = '20px Courier New, monospace'
ctx.font = '20px Times New Roman, serif'
ctx.font = '20px Verdana, sans-serif'
默认字体
默认字体为 10px sans-serif。
字体加载
使用自定义字体需确保字体已加载完成。
document.fonts.ready.then(function() {
ctx.font = '20px CustomFont'
ctx.fillText('自定义字体', 50, 50)
})
字体回退
始终指定回退字体。
ctx.font = '20px CustomFont, Arial, sans-serif'