HTML canvas font プロパティ

❮ HTML Canvas リファレンス

例

フォント "Arial" を使用して、キャンバスに高さ 30px のテキストを描きます：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Try it Yourself ❯

ブラウザ・サポート

表中の数字は、プロパティを完全にサポートした最初のブラウザ・バージョンを指定しています。

プロパティ
font Yes 9.0 Yes Yes Yes

定義と用法

font プロパティは、キャンバス上のテキストコンテンツの現在のフォントプロパティを設定または返します。

font プロパティは、CSS font プロパティと同じ構文を使用しています。

デフォルト値： 10px sans-serif
JavaScript 構文： context.font="italic small-caps bold 12px arial";

プロパティの値

値 説明 Play it
font-style フォントスタイルを指定する。指定可能な値：
  • normal
  • italic
  • oblique
 Play it ❯
font-variant フォントバリアントを指定する。指定可能な値：
  • normal
  • small-caps
 Play it ❯
font-weight フォントの1太さを指定する。指定可能な値：
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Play it ❯
font-size/line-height フォントサイズと行の高さをピクセルで指定する Play it ❯
font-family フォントファミリを指定する Play it ❯
caption コントロール (ボタン、ドロップダウンなど) の見出しに使われるフォントを使用する Play it ❯
icon ラベルのアイコンに使われるフォントを使用する Play it ❯
menu メニュー（ドロップダウンメニューとメニューリスト）で使われるフォントを使用する Play it ❯
message-box ダイアログボックスで使われるフォントを使用する Play it ❯
small-caption 小さなコントロールのラベルに使われるフォントを使用する Play it ❯
status-bar ウィンドウのステータスバーで使われるフォントを使用する Play it ❯
HTML canvas Reference HTML Canvas リファレンス