CanvasRenderingContext2D: font 屬性
Canvas 2D API 的 CanvasRenderingContext2D.font 屬性用於指定繪製文字時使用的當前文字樣式。此字串使用與 CSS font 說明符相同的語法。
值
一個被解析為 CSS font 值的字串。預設字型為 10px sans-serif。
示例
使用自定義字型
在此示例中，我們使用 font 屬性來指定自定義的字型粗細、大小和字體系列。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);
結果
使用 CSS Font Loading API 載入字型
藉助 FontFace API，您可以在畫布中使用它們之前顯式載入字型。
js
let f = new FontFace("test", "url(x)");
f.load().then(() => {
// Ready to use the font in a canvas context
});
規範
| 規範 |
|---|
| HTML # dom-context-2d-font-dev |
瀏覽器相容性
載入中…
另見
- 定義此屬性的介面：
CanvasRenderingContext2D