fontプロパティは、フォントに関する指定をまとめて行う際に使用します。
指定できるのは、
font-style、
font-variant、
font-weight、
font-size、
line-height、
font-familyの6つのプロパティの値です。
各プロパティの値を指定する際の順序は以下のように決まっています。
このうち
font-sizeと
font-familyは
省略することができません。
line-heightを指定する場合には、以下の例のようにline-heightの値を記述する前にスラッシュ( / )で区切ります。
font: bold large/150% “MS 明朝”;
尚、fontプロパティを使用すると、フォント関連のスタイルが一旦リセットされてから、
fontプロパティで指定した値が適用される点に注意してください。
省略した値は、親要素に指定されている値を継承するのではなく初期値に戻されます。
■使用例
スタイルシート部分は外部ファイル(sample.css)に記述。
p.sample {font: bold large/150% “MS 明朝”;
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample”>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。
</p>
</body>
</html>
ブラウザ上の表示
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
■関連項目
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする