Canvas font 屬性
示例
在畫布上寫一個 30 畫素高、字型為 "Arial" 的文字
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 | 字型族 | 試一試 » |
| 標題 | 使用按鈕上使用的字型 | 試一試 » |
| icon | 使用用於標記圖示的字型 | 試一試 » |
| 選單 | 使用選單中使用的字型 | 試一試 » |
| 訊息框 | 使用對話方塊中使用的字型 | 試一試 » |
| 小標題 | 使用用於標記小型控制元件的字型 | 試一試 » |
| 狀態列 | 使用視窗狀態列中使用的字型 | 試一試 » |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
font 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
