CanvasRenderingContext2D: font プロパティ

Baseline 2025

値

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

例

カスタムフォントの使用

この例では、 font プロパティを使用して、カスタムフォントの太さ、大きさ、ファミリーを指定します。

HTML

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 API の助力により、キャンバスで使用する前にフォントを明示的に読み込むことができます。

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

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

仕様書

仕様書
HTML # dom-context-2d-font-dev

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年11月3日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告