CanvasRenderingContext2D.font

CanvasRenderingContext2D.font はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS の font の記述子と同じ構文を用います。

構文

ctx.font = value;

オプション

value: DOMString で、 CSS の font の値として解釈されるものです。既定のフォントは 10px sans-serif です。

例

カスタムフォントの使用

この例では、 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)。