CSS資料一覧
更新日:2007/9/6
ここではフォントに関するプロパティについて説明する。
尚、特定のブラウザでしかサポートしていないプロパティやパラメータは記載しない。
フォントの種類
font-family: <フォント名1>[,<フォント名2>,<フォント名3>...];
フォントは複数指定することができる。
指定したフォントがない場合、2つ以上指定している場合は次のフォントから、それでもない場合は似たフォントをブラウザ側が判断して表示させる。
フォント名指定
フォント名は大文字/小文字、全角/半角、スペースの有無などを含めて正確に指定する必要がある。
例えば「ＭＳ 明朝」をフォントで使用したい場合には、「ＭＳ」と「明朝」は全角で、ＭＳと明朝の間にあるスペースは半角で指定しなければならない。
さらに、フォント名にスペースが含まれているものはかならず「"」で括らなければならない。
2つ以上フォントを指定する時はフォント名を「,」で区切る。
フォントファミリー指定
<フォント名>の部分には他にフォントファミリーを指定することもできる。
フォントファミリーならブラウザ側が自身で使用可能なフォントを選択してくれるので表示するフォントがないということは少なくなる。
指定できるフォントファミリー名は以下の通りである。
serif
明朝体などのフォント
sans-serif
ゴシック体などのフォント
cursive
筆記体などのフォント
fantasy
装飾的なフォント
monospace
等幅フォント
尚、フォントはクライアントのOSやブラウザによって環境が左右されるので、必ずしも意図したとおりに表現されないことがあるということを考慮すること。
サンプル
font-family: "ＭＳ 明朝","Times New Roman",Arial
font-family: serif
font-family: sans-serif
font-family: cursive
font-family: fantasy
font-family: monospace
斜体(イタリック)
font-style: <設定値>;
設定値
normal (デフォルト)
通常
italic
斜体
oblique
斜体 (CSS1では通常のフォントを擬似的に斜体にする)
CSS2では両パラメータともイタリックフォントを使用する。
サンプル
font-style: normal(通常)
font-style: italic
font-style: oblique
文字の太さ
font-weight: <設定値>;
設定値
normal (デフォルト)
通常
bold
太字
bolder
今までより太くする
lighter
今までより細くする
100〜900
数値に対応して太さが変わる
boldを指定すると文字が単純に太くなる。
bolderやlighterは相対的な指定で、今までの太さに比べて太くしたり細くしたりできる。ただし、これは太さがいくつか用意されている場合に限られている。
100〜900を指定した場合、数値に対応して太さが変わる。数値は100刻みで9段階で指定できる。400が標準で大きいほど太くなる。ただし、フォントによっては全ての数値に対応しているわけではなく、9段階全てに対応しているフォントもないようである。
例えば「ＭＳ 明朝」の場合は500以下は全て400の値で、600以上は600の値で統一されていて2段階の太さしか表せない。
サンプル
font-weight: normal
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: 200
font-weight: 500
font-weight: 600
font-weight: 800
文字のサイズ
font-size: <設定値>;
設定値
数値+単位
指定したサイズ
xx-small
一番小さい文字サイズ
x-small
小さい文字サイズ
small
少し小さい文字サイズ
medium
普通の大きさ
large
少し大きい文字サイズ
x-large
大きい文字サイズ
xx-large
一番大きい文字サイズ
smaller
相対的に小さい文字サイズ
larger
相対的に大きい文字サイズ
サンプル
font-size: 18px
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large
font-size: smaller
font-size: larger
スモールキャップ
font-variant: <設定値>;
設定値
normal (デフォルト)
通常
small-caps
スモールキャップ指定
スモールキャップとは日本文ではなじみがないが大文字を一回り小さいサイズで扱う英文独自の表現である。
small-capsを指定することでスモールキャップを設定することができる。
基本は英文であるが、日本文もやや小さめに表現される。
サンプル
font-variant: normal (通常)
font-variant: small-caps
フォント(一括)
このプロパティでフォント関連のパラメータを一括して設定することができる。
それぞれの値に以下の内容を設定する。
font: style variant weight size/height family;
height(line-height)を指定する時はsizeと「/」で区切って指定する。
sizeとfamily以外は省略可能である。
値を省略した場合はそれぞれのパラメータの初期値が設定される。
関連情報(Google検索)
