HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas font属性

font は Canvas 2D API は文字を描画する際の現在のフォントスタイルの属性を説明しています。CSS font仕様と同じ文字列値を使用します。

オンラインサンプル

キャンバス上にテキストを書きます。 30 ピクセルのテキストを書いています。使用しているフォントは "Arial" です：

サンプル

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML canvas font属性使用-基础教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="15"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML5　canvas タグ
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.font="30px　Arial";
ctx.fillText("基础教程　oldtoolbag.com",10,50);
</script>
</body>
</html>

テストして見てください ‹/›

ブラウザ互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari が font 属性をサポートしています。属性

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用法

キャンバス上のテキストコンテンツの現在のフォント属性を設定または返します。

font 属性の使用法は CSS font 属性同じです。

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

属性値

値	説明
font-style	フォントのスタイルを指定します。可能な値： normal italic oblique
font-variant	フォントのバリエーションを指定します。可能な値： normal small-caps
font-weight	フォントの太さを指定します。可能な値： normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	サイズと行高をピクセル単位で指定します。
font-family	フォントファミリーを指定します。
caption	タイトルコントロール（ボタン、ドロップダウンリストなど）に使用されるフォントを使用します。
icon	アイコンをマークするためのフォントを使用します。
menu	メニューに使用されるフォント（ドロップダウンリストとメニューリスト）を使用します。
message-box	ダイアログボックスに使用されるフォントを使用します。
small-caption	小さなコントロールをマークするためのフォントを使用します。
status-bar	ウィンドウのステータスバーに使用されるフォントを使用します。

HTML canvas 参考マニュアル

HTML: <template> タグ