font

Home>CSS>プロパティリファレンス>font

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

fontプロパティの役割

fontプロパティは、フォント関連のプロパティを一括して指定できます。
具体的には、以下のプロパティを一括で指定し、

以下のプロパティには初期値を設定します。

fontプロパティに設定できる値

font-styleプロパティの値

italic イタリック体(斜体)にする。なければobliqueが適用され、それでもなければnormalが適用される。
normal 直立表示。初期値。
oblique イタリック体(斜体)にする。なければnormalが適用される。

font-weightプロパティに設定できる値

数値 100~900迄の9段階(100ずつ変化)。値が大きいほど太字になる。
bold 太字。700。
bolder 直近の太さに100を加えた太さ。
lighter 直近の太さから100を引いた太さ。
normal 通常の太さ。400。初期値。

font-sizeプロパティに設定できる値

整数 数値+単位で指定。
基準のサイズを100とした100分率。
xx-small h6要素の大きさ。60%。
x-small 75%。
small h5要素の大きさ。88.8%。
medium h4要素の大きさ。100%。
large h3要素の大きさ。120%。
x-large h2要素の大きさ。150%。
xx-large h1要素の大きさ。200%。
larger 現在の大きさより大きく。
smaller 現在の大きさより小さく。

line-heightプロパティに設定できる値

line-heightプロパティを、fontプロパティで指定する場合には、半角スラッシュの後に数値を表記します。
「/1」ならば100%、「/1.2」ならば120%といった具合です。

font-familyプロパティに設定できる値

フォント名 カンマで区切って複数を指定可能。

font-styleプロパティとfont-familyプロパティは省略できないため、必ず指定します。それ以外のプロパティは、省略すると初期値がセットされます。

なお、指定する順番は以下のとおりです。

  1. font-style
  2. font-weight
  3. font-size
  4. line-height
  5. font-family

fontプロパティの使い方

<p style="font:italic bold 200%/2 Arial,'MS P明朝'">fontプロパティを使ってフォントの表現方法を一括して指定しています。このサンプルではイタリック体で明朝体を表示し行間を200%にしています。</p>

fontプロパティを使ってフォントの表現方法を一括して指定しています。このサンプルではイタリック体で明朝体を表示し行間を200%にしています。

関連リンク

よく読まれている記事

UpDate:2010-8-16