HTMLキャンバスフォント属性
例
キャンバス上に40ピクセルのテキストを書いて、使用するフォントは"Arial"です:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="40px Arial"; ctx.fillText("Hello World",10,50);
文法
context.font="italic small-caps bold 12px arial";
属性値
値 | 説明 |
---|---|
font-style |
規定字体のスタイル。
|
font-variant |
規定字体の変体。
|
font-weight |
規定字体の太さ。
|
font-size / line-height | ピクセル単位でサイズと行高を指定します。 |
font-family | フォントファミリーを指定します。 |
caption | タイトルコントロール(ボタン、ドロップダウンリストなど)に使用されるフォントを指定します。 |
icon | アイコンをマークするために使用されるフォントを指定します。 |
menu | メニューに使用されるフォント(ドロップダウンリストおよびメニューリスト)を指定します。 |
message-box | ダイアログに使用されるフォントを指定します。 |
small-caption | 小さなコントロールをマークするために使用されるフォントを指定します。 |
status-bar | ウィンドウのステータスバーに使用されるフォントを指定します。 |
技術的詳細
デフォルト値: | 10px sans-serif |
---|
ブラウザのサポート
表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記:Internet Explorer 8 以前のバージョンでは <canvas> 元素がサポートされていません。