コンテンツにスキップ

CSS/フォント

出典: フリー教科書『ウィキブックス(Wikibooks)』
< CSS

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

フォントファミリー

[編集]

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

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

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

body {
    font-family: "ヒラギノ角ゴPro W3", "MS Pゴシック", 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

関連資料

[編集]
このページ「CSS/フォント」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。