フォント周りの指定をまとめるfontプロパティ
font

 フォントに関するプロパティをまとめて指定できますが、font-sizefont-familyの指定は必須となります。

 便利なことに、font周りのプロパティを、まとめて指定できますが、指定には順番が下記のように決められているので、必須項目も含め、注意が必要です。

  1. font-stylefont-variantfont-weight(順不同)
  2. font-size(必須)
  3. line-height(前方にスラッシュが必要)
  4. font-family(必須)

 また、システムフォントを使用することもできます。

 システムフォントというのは種類や太さ、大きさなどユーザーのPCで使用されてるフォントのことで、それと同じに設定できます。

 ただし、システムフォントの値を指定する場合は、ほかのプロパティとの併記はできないので、注意が必要です。対応策としては、後述する形で上書きする方法があるので、ご安心ください。

基本データ

構文 セレクタ{font:値;}
継承
個々のプロパティの値の指定法による
 
キーワードを使って指定する場合
caption、icon、menu、message-box、small-caption、status-bar
効果 フォント周りの指定をまとめる
初期値 個々のプロパティの初期値による
適用箇所 すべての要素

ほげほげですね。

p { font: italic bold small-caps 85%/1.5 'MS Pゴシック',sans-serif;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.font

jQueryを使った参照方法

$('【セレクタ】').css('font','【値】');
$('【セレクタ】').css({'font':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間