font プロパティ
構文
仕様
font IDL 属性は、値がセットされると、CSSの 'font' プロパティと同じように解釈されなければいけません(ただし、'inherit'のようなプロパティ非依存のスタイルシート構文はサポートされません。)。その結果、フォントは、'normal' に強制された 'line-height' コンポーネントで、そして、CSS ピクセルに変換された 'font-size' コンポーネントで、そして、明示的な値に算出されているシステムフォントで、コンテキストに割り当てられなければいけません。新しい値が構文的に正しくない('inherit' や 'initial' のようなプロパティ非依存のスタイルシート構文の利用を含む)なら、新たなフォントを割り当てず、無視されなけばいけません。[CSS]
フォント名は canvas 要素のスタイルシートのコンテキスト内で解釈されなければいけません。そのため、@font-face を使って組み込まれたフォントは、ロードされれば、利用可能とならなければいけません。(フォントのロードが完了する前に参照されたら、不明のフォントだったかのように扱われ、関連の CSS 仕様で解説されているとおり、別のフォントにフォールバックします。)[CSSFONTS]
ユーザーエージェントは、ベクターフォントのみを利用すべきです。もしユーザーエージェントがビットマップフォントを使ったなら、変形を行った際に、フォントが非常に見苦しいものになってしまいます。
font 属性の値を取得したら、コンテキストの現在のフォントがシリアル化された形式で返されなければいけません。('line-height' コンポーネントを除く)。[CSSOM]
例えば、次の宣言の後で:
context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
... context.font という表現は、文字列 "italic 12px "Unknown Font", sans-serif" と同等になるでしょう。"400" という font-weight は現れません。なぜなら、それはデフォルト値だからです。line-height は現れません。なぜなら、それはデフォルト値である "normal" に強制されるからです。
コンテキストが生成されると、そのコンテキストのフォントは 10px の sans-serif にセットされなければいけません。'font-size' コンポーネントがパーセンテージや 'em', 'ex' の単位や、'larger', 'smaller' といったキーワードを使った長さで指定されていれば、この属性がセットされた時点における対応する canvas 要素の 'font-size' プロパティの算出値から相対的であると解釈されなければいけません。'font-weight' コンポーネントが 'bolder', 'lighter' といった相対値にセットされている場合は、この属性がセットされた時点における対応する canvas 要素の 'font-weight' プロパティの算出値から相対的であると解釈されなければいけません。算出値が特定のケースで undefined となる場合(例えば、canvas 要素が Document 内にないといった理由で)、その関連のキーワードは、デフォルトである normal-weight 10px sans-serif に対応して解釈されなければいけません。
※ 原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-font
サンプル
このサンプルは、フォントのサイズや種類を変えながら文字列を描いたものです。Canvas の font プロパティーにセットする値は、CSS の font プロパティーと同じです。
/* 12px 'Times New Roman */ ctx.font = "12px 'Times New Roman'"; ctx.fillText("Times New Roman", 10, 15); /* 18px 'Monotype Corsiva' */ ctx.font = "18px 'Monotype Corsiva'"; ctx.fillText("Monotype Corsiva", 10, 36); /* italic bold 22px 'MS Pゴシック' */ ctx.font = "italic bold 22px 'MS Pゴシック'"; ctx.fillText("MS Pゴシック", 10, 65); /* italic bold 26px 'HG正楷書体-PRO' */ ctx.font = "italic bold 26px 'HG正楷書体-PRO'"; ctx.fillText("HG正楷書体-PRO", 10, 95);
ブラウザ対応状況
| Firefox | Safari | Chrome | Opera | IE | ExplorerCanvas |
|---|---|---|---|---|---|
| 2 × | 2 × | 1 × | 9.2 × | 9 ○ | 0002 × |
| 3 × | 3 × | 2 ○ | 9.5 × | 3 × | |
| 3.5 ○ | 4 ○ | 3 ○ | 10 × | ||
| 3.6 ○ | 5 ○ | 6 ○ | 10.60 ○ |