CanvasRenderingContext2D: font プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CanvasRenderingContext2D.font
はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は 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 フォント読み込み API でフォントを読み込む
FontFace
API の助力により、キャンバスで使用する前にフォントを明示的に読み込むことができます。
js
let f = new FontFace("test", "url(x)");
f.load().then(() => {
// canvas コンテキストでフォントを使用する準備ができた
});
仕様書
Specification |
---|
HTML # dom-context-2d-font-dev |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- このメソッドを定義するインターフェイス:
CanvasRenderingContext2D