This page was translated from English by the community. Learn more and join the MDN Web Docs community.

CanvasRenderingContext2D.font

CanvasRenderingContext2D.font は Canvas 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 Font Loading API でフォントを読み込む

FontFace (en-US) API の助力により、canvas で使用する前にフォントを明示的に読み込むことができます。

let f = new FontFace('test', 'url(x)');

f.load().then(function() {
  // canvas コンテキストでフォントを使用する準備ができた
});

仕様書

仕様書 状態 備考
HTML Living Standard
CanvasRenderingContext2D.font の定義		 現行の標準

ブラウザ実装状況

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)。

関連情報