Cascading Style Sheets解説

Properties・フォント関連

font-family フォントファミリー

値：
[ [ <family-name> | <generic-family> ] , ]* [ <family-name> | <generic-family> ]
初期値：
UA依存
適用対象：
全要素
継承：
される

解説：

使用するフォントを指定します。

系統名意味
serifひげ付き
sans-serifひげ無し
cursive装飾付き
fantasy手書き風（日本語環境では表示されない可能性あり）
monospace等幅

例：

p{font-family: "Trebuchet MS", Arial, sans-serif}

font-size サイズ

値：
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <単位指定> | <パーセント>
初期値：
midium
適用対象：
全要素
継承：
される
<パーセント>：
親要素のフォントサイズに対する比率
マイナス値：
不可

解説：

フォントのサイズを指定します。「xx-small」～「xx-large」は固定サイズです。「larger」と「smaller」は親要素に対する相対指定です。

個人的には単位「pt」等の固定的なサイズ指定より、単位「em」やパーセント等の相対的なサイズ指定を用いた方が、見る人に優しくなると思います。

例：

p{font-size: 1.5em}

font-weight 太さ

値：
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値：
normal
適用対象：
全要素
継承：
される

解説：

フォントの太さを指定します。「100」～「900」は絶対指定ですが、現状では「400」と「700」くらいしかサポートされていないようです。「bolder」と「lighter」は親要素に対する相対指定です。

「normal」=「400」、「bold」=「700」です。

例：

p{font-weight: bold}

font-style フォントスタイル

値：
normal | italic | oblique
初期値：
normal
適用対象：
全要素
継承：
される

解説：

使用フォントを斜体にします。「italic」は専用斜体、「oblique」は単純斜体とされますが、日本語では文字形状に差は見られないようです。

例：

dfn{font-style: normal}

font-variant スモールキャピタル

値：
normal | small-caps
初期値：
normal
適用対象：
全要素
継承：
される

解説：

小文字を「小さな大文字」として表示します。日本語文字では関係ありません。

例：

span{font-variant: small-caps}

font 一括指定

値：
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値：
各プロパティの初期値
適用対象：
全要素
継承：
される

解説：

関連するプロパティ（「font-style」、「font-variant」、「font-weight」、「font-size」、「line-height」、「font-family」）を一括で指定します。
「font-size」と「font-family」は省略できません。
また、「line-height」の前の「/（スラッシュ）」はそのまま記述します。
「line-Height」->テキスト関連

例（注意）：

p{line-height: 1.5em}
p{font: italic medium sans-serif}
というように2つに分けて指定した場合、
p{font: italic normal normal medium / normal sans-serif}
と解釈されます。（値を省略した場合、それぞれの初期値が適用される。故に「line-height」の値も初期値「normal」が適用され、以前に指定した「1.5em」の指定は上書きされ、改めて「normal」を指定したことになる）

[Back(b)][Cover(c)]