CSS/フォント

CSSではフォント関連プロパティでフォントに関する設定を行う。文字に関する設定はほかにテキスト関連プロパティも参照していただきたい。

フォントファミリー

フォントファミリーとは通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものである。「ＭＳＰ明朝」などもフォントファミリーである。フォントファミリーは“font-family”プロパティで指定する。

設定できる値には具体的なフォントファミリ名のほか総称ファミリー名を指定することができる。

具体的なフォントファミリ名を指定すると、ページの作成者が意図した通りの形状のフォントでページを表示することが出来る。しかし、指定されたフォントが閲覧に用いたパソコンへインストールされていない場合、意図したフォント表示できない。このため、フォントを特徴によって分類された総称ファミリー名を指定することによって、ユーザーの環境にインストールされているフォントでページ作成者の意図した種類に最も近いものを自動的に選択させることが出来る。

body {
    font-family: "ヒラギノ角ゴPro W3", "ＭＳ Ｐゴシック", Osaka, serif;
}

フォントファミリー名や総称ファミリー名は半角カンマ区切りのリストで複数指定できる。“inherit”で親要素から継承することも可能。なおデフォルトのフォントはブラウザの種類や表示設定に依存する。

serif: 撥ねがあったり、先端の太さに変化があるフォント。日本語では明朝体。
sans-serif: 撥ね（ハネ）、先端の太さの変化のないフォント。日本語ではゴシック体。
cursive: イタリック体よりも筆記体に近いフォント。日本語では行書体、草書体などが相当。
fantasy: 文字として読める範囲で装飾をしたフォント。日本語フォントではあまり用いられない。
monospace: 等幅フォント。文字の種類に関わらず文字の幅が統一されているフォント。

フォントスタイル

font-style プロパティとその値。

normal: 「通常体」に分類されるフォントを指定する。
italic: 「イタリック体」に分類されるフォントを指定する。利用できない場合ブラウザは自動的に「斜体」に分類されるフォントを選択する。
oblique: 「斜体」に分類されるフォントを指定する。利用できない場合ブラウザは「通常体」を傾けて勝手に斜体を生成してもよい。
inherit: 親要素から継承

スモールキャピタル

font-variant プロパティとその値。

normal: スモールキャピタルではない通常のフォントを指定する。
small-caps: スモールキャピタル（小文字サイズの大文字）フォントを指定する。利用できない場合ブラウザは大文字を縮小してスモールキャピタル化するべきとされているが、不可能な場合は単に大文字で表示してもよいとされている。
inherit: 親要素から継承

フォントの太さ

font-weightプロパティを使うことにより、文字の太さを設定することが出来る。

normal: 数値400に同じ。
bold: 数値700に同じ。
bolder: 継承した値よりも太いフォントに当たるうち最も近い太さのものを選択する。
lighter: 継承した値よりも細いフォントに当たるうち最も近い太さのものを選択する。
100-900の数値（100刻み）: フォントの太さを9段階で指定する。実際にはこのような細かな指定にブラウザやフォントが対応していないことが多い。
inherit: 親要素から継承

フォントサイズ

font-size プロパティではフォントの大きさを設定することが出来る。単位を付けて絶対値での指定を行うと、一部のブラウザでは表示フォントサイズの設定を無視して固定値で表示する場合がある。

body {
    font-size: 90%;
}

キーワードによる指定

xx-small, x-small, small, medium, large, x-large, xx-large のキーワードでフォントサイズを指定すると、周囲のフォントサイズに関係なく一定の大きさで表示される。ただし、ユーザーがブラウザの表示フォントサイズを変更していると、それに従って見かけ上の大きさは変化する。

また、larger, smaller のキーワードでフォントサイズを指定すると、継承された文字の大きさを基準に相対的な大きさでフォントサイズを表示する。

単位による指定

フォントサイズは単位による大きさ指定も可能である。ただし、%, em, ex 以外の単位を用いると、ブラウザによっては表示フォントサイズの設定を無視する場合がある。ユーザーが好みに応じて表示サイズを変更することが出来なくなるため、使用には注意が必要である。

%: 継承された文字の高さを基準として相対的な大きさをサイズを比率で指定。標準サイズは100%。
em: 継承された文字の高さを基準として相対的な大きさを指定。標準サイズは1em。
ex: 継承されたxの文字の高さを基準として相対的な大きさを指定1ex。
px: 画面のピクセル数を基準に指定。
pt: ポイント単位で指定。
pc: パイカ単位で指定。
cm: センチメートル単位で指定。
mm: ミリメートル単位で指定。

フォントの設定をまとめて設定

フォント関係の設定はfontプロパティを用いることで、まとめて設定することが可能である。fontプロパティでまとめて設定を行う場合、以下のような記述を行う。

<font-styleの値> <font-variantの値> <font-weightの値>（前の三つは順不同:省略可） <font-sizeの値>（必須）/<line-heightの値>（省略可） <font-familyの値>（省略可）

また、fontプロパティの値にキーワードを設定することで、システムフォントの設定を呼び出すことも可能である。

caption: キャプションラベルに使用されているフォント
icon: アイコンのラベルに使用されているフォント
menu: メニューに使用されているフォント
message-box: ダイアログボックスに使用されているフォント
small-caption: キャプションラベルに使用されているフォント（小）
status-bar: ステータスバーに使用されているフォント
inherit

CSS2.1勧告候補で削除された設定

フォントの字幅

font-stretch プロパティではフォントの字幅を設定することができる。このプロパティは、CSS2で追加されたがCSS2.1勧告候補では削除された。

normal
通常の字幅: wider
継承された値より広い字幅: narrower
継承された値より狭い字幅: ultra-condensed
とても狭い字幅: extra-condensed
さらに狭い字幅: condensed
狭い字幅: semi-condensed
少し狭い字幅: semi-expanded
少し広い字幅: expanded
広い字幅: extra-expanded
さらに広い字幅: ultra-expanded
とても広い字幅: inherit

フォントサイズ調節

font-size-adjust プロパティを使うと、フォントサイズを変更することにより、違うフォントでもx-heightを同じにすることができる。

数値
アスペクト値（小文字‘x’の高さ÷文字の高さ）を指定する。: none
x-heightを一定に保たない。: inherit