フォント

フォント属性を次の表に示す。

フォント関連の属性一覧
属性 内容
font-family 表示するフォントの種類を指定する
font-style フォントのスタイルを指定する
font-variant フォントのバリエーションを指定する
font-weight フォントの太さを指定する
font-size フォントのサイズを指定する
font 上記5つの略表記

font-family

表示するフォントの種類を指定する属性。値には具体的なフォント名(例えば、MS 明朝)、あるいは一般化されたフォント名を指定する。

一般化されたフォント名は次のとおり。

font-family属性に指定する値
フォント名 読み
serif セリフ
sans-serif サンセリフ
cursive カーシブ
fantasy ファンタジー
monospace モノスペース

実際に表示されるフォントはブラウザの種類、設定により異なる。

フォント名を指定してページを制作するのはあまり意味がありません。なぜなら、ページのすべての閲覧者が自分と同じフォントを使っているとは限らないからです。

font-style

フォントのスタイルを指定する属性。指定できる値は表のとおり。

font-style属性で指定する値
意味
normal 標準のフォントを使用する
italic イタリック体のフォントを使用する
oblique 斜体のフォントを使用する

この属性では通常のスタイルと斜体のスタイルを指定できる。italicとobliqueの表示は変わらない。

font-variant

フォントのバリエーションを指定する属性。指定する属性はnormalとsmall-capsのいずれか。

font-weight

フォントの太さを指定する属性。指定できる値を表に示す。

意味
normal 標準フォントを指定
bold ボールド体フォントを指定
bolder 現在のフォントより一段太いフォントを指定
light 現在のフォントより一段細いフォントを指定
100〜900 100刻みで9段階の太さのフォントを指定

font-size

フォントの大きさを指定する属性。指定できる値をつぎの表に示す。

意味
xx-small
x-small
small
mediuml
arge
x-large
xx-large
フォントの相対的なサイズ指定
長さ 数値での直接指定
xx% 現在のフォントのパーセントで指定

font

この属性はfont-family、font-style、font-variant、font-weight、font-size、line-heightの6つの属性をまとめて指定できる。次の例のように値を空白文字で区切る。

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }