We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Canvas 2D API の CanvasRenderingContext2D.font プロパティは、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS font 記述子 (specifier) と同じ構文を用います。デフォルトフォントは 10px のサンセリフ (sans-serif) です。

構文

ctx.font = value;

オプション

value
CSS font の値としてパースされる DOMString。デフォルトのフォントは 10px sans-serif です。

font プロパティの使用例

さまざまなフォントサイズやフォントファミリーを設定するために font プロパティを使用する、シンプルなコードスニペットです。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

CSS Font Loading API でフォントを読み込む

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

var f = new FontFace("test", "url(x)");
  f.load().then(function() {
    // canvas コンテキストでフォントを使用する準備ができた
});

仕様

仕様書 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.font の定義
現行の標準  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 3.5 (1.9.1) 9 (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.9.1) (有) (有) (有)

Gecko 固有の注意事項

  • Firefox など Gecko ベースのブラウザではこのプロパティのほかに、非標準かつ非推奨の ctx.mozTextStyle を実装しています。これは使用しないでください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,