Go to information

font

fontプロパティは font-styleプロパティ, font-variantプロパティ, font-weightプロパティ, font-sizeプロパティ, line-heightプロパティ, font-familyプロパティのフォントに関する6つのプロパティをまとめて設定します。また、fontプロパティでは font-familyプロパティに指定できないシステムフォント(ユーザーのシステムで使用されているフォント)が指定可能となっています。

初期値
個別のプロパティの初期値を参照
適用対象
すべての要素
継承
する
メディア
visual

fontプロパティが適用された要素は、フォント関連プロパティの値がすべて初期値にリセットされ、それから指定値が割り当て直されることになります。このため同一セレクタに個別のプロパティと簡略プロパティを併用する場合は、宣言ブロック内で後に記述した宣言の方が優先されるので効果の兼ね合いに注意しましょう。また、値を指定する事は出来ませんが、font-size-adjustプロパティfont-stretchプロパティにも、fontプロパティが定義された時点で両プロパティの値を初期値にリセットする形で影響を与えるので、fontプロパティと併用する場合は、これら2つのプロパティは宣言ブロック内で fontプロパティよりも後に記述する必要があります。

指定方法は各プロパティの値を半角スペースで区切って続けて指定します。さらに各プロパティの値を示す順序が決まっており、1-3番目までは font-styleプロパティ, font-variantプロパティ, font-weightプロパティの各値を半角スペース区切りで順不同に記述できますが、4番目には font-sizeプロパティの値を指定し、スラッシュ(/)区切りで、5番目に line-heightプロパティの値を記述し、最後に半角スペースで区切って、font-familyプロパティの値を記述します。文字と行間部分については半角スペース区切りではなく、"font-sizeの値/line-heightの値" のようにスラッシュ(/)で区切って続けて指定することに注意してください。

なお、font-sizeプロパティと font-familyプロパティ以外の値は省略が可能で、省力した場合は各プロパティの値はすべて初期値にリセットされているため、各プロパティの初期値が自動的に適用されます。たとえば、font-styleプロパティと font-weightプロパティに関する部分の値を省略した場合、たとえ親要素に font-styleプロパティと font-weightプロパティに初期値以外の値が指定されていても、fontプロパティをもつ要素は font-styleプロパティと font-weightプロパティのどちらも初期値の "normal" が指定されていると解釈し、子要素にも継承されます。

システムフォント

システムフォントの値は、フォントの種類・大きさ・太さ・スタイルなどを含めて、ユーザーのシステムで使用されているフォントと同じ設定にすることができます。ただし、システムフォントのキーワードを使用する場合は、フォント関連プロパティの値と併用することができません。何らかの変更を加えたい場合は、システムフォントを割り当てた後で、初期値にリセットされているので必要に応じて個別のプロパティを指定しなすなりして上書き変更するようにしましょう。

caption
キャプションやラベルとして使用されているフォント
icon
アイコンの名前として使用されているフォント
menu
メニューで使用されているフォント
message-box
ダイアログで使用されているフォント
small-caption
キャプションやラベルとして使用されているフォント
status-bar
ウインドウのステータスバーで使用されているフォント
font-style
フォントのイタリック体、または斜体表示を指定する
font-variant
スモールキャピタルで表示する
font-weight
フォントのウエイト(太さ)を指定する
font-size
フォントの大きさを指定する
line-height
行の高さを指定する(*テキスト関連プロパティ
font-family
フォントの種類(表示書体)を指定する

fontプロパティの実装状況

Windows版Internet Explorer
○(Windows版Internet Explorer 6 は font-size の実装に問題有り)
Firefox
Opera
Safari
○(font-family の実装に問題有り)
Macintosh版Internet Explorer 5
○(font-family, font-size の実装に問題有り)

サンプル

記述例
p   { font : 100%/1.2 Arial,'MS Pゴシック',sans-serif ; }
dfn { font : italic small-caps bold 110%/1.2 'Georgia',serif ; }
.caption       { font : caption ; }
.icon          { font : icon ; }
.menu          { font : menu ; }
.message-box   { font : message-box ; }
.small-caption { font : small-caption ; }
.status-bar    { font : status-bar ; }
表示例
現在位置
  1. W3G
  2. CSS
  3. フォント
  4. font
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:21:46+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/font/font
検索