CanvasRenderingContext2D.font
CanvasRenderingContext2D.font
はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS の font の記述子と同じ構文を用います。
構文
ctx.font = value;
オプション
例
カスタムフォントの使用
この例では、 font
プロパティを使用して、カスタムフォントの太さ、大きさ、ファミリーを指定します。
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 48px serif';
ctx.strokeText('Hello world', 50, 100);
結果
CSS フォント読み込み API でフォントを読み込む
FontFace
(en-US) API の助力により、キャンバスで使用する前にフォントを明示的に読み込むことができます。
let f = new FontFace('test', 'url(x)');
f.load().then(function() {
// canvas コンテキストでフォントを使用する準備ができた
});
仕様書
Specification |
---|
HTML Standard # dom-context-2d-font-dev |
ブラウザーの互換性
BCD tables only load in the browser
Gecko 特有のメモ
- Firefox など Gecko ベースのブラウザーでは、このプロパティのほかに標準外かつ非推奨の
ctx.mozTextStyle
を定義しています。代わりにctx.font
を使用してください。 - Gecko では、システムフォントをキャンバスの 2D コンテキストの
font
(例えばmenu
) の値として設定した場合、フォントの値を取得しても期待したフォントが返されない (何も返されない) ことがありました。これは、Firefox 57 でリリースされた Firefox の並列 CSS エンジン Quantum/Stylo で修正されました (bug 1374885)。
関連情報
- このメソッドを定義するインターフェイス:
CanvasRenderingContext2D