font

Updated / Published

fontプロパティは font-styleプロパティ, font-variantプロパティ, font-weightプロパティ, font-sizeプロパティ, line-heightプロパティ, font-familyプロパティのフォントに関する6つのプロパティをまとめて設定するショートハンド（CSSにおいて値を簡略化できる記法のこと）です。また、fontプロパティでは font-familyプロパティに指定できないシステムフォント（ユーザのシステムで使用されているフォント）が指定可能となっています。

値
初期値
font-style : normal ;
font-variant : normal ;
font-weight : normal ;
font-size : medium ;
line-height : normal ;
font-family : UA依存 ;
適用対象
すべての要素
継承
する
メディア
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プロパティはショートハンドとして機能するのではなく、システムフォントのみを指定するプロパティとして機能するので何らかの変更を加えたいのであれば、システムフォントを割り当てた後で、初期値にリセットされているため必要に応じて個別のプロパティを指定しなすなりして上書き変更するようにしましょう。

fontプロパティの実装状況

IE
◯：IE6, IE7 はフォントサイズの実装に問題有り。IE8においてもレンダリングモードが後方互換(quirk)モードの場合に同様の問題が発生。IE9からはサブピクセルレンダリングが採用され改善されている
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯：font-familyで和文フォントの日本語表記は無効、英文字表記の場合のみ認識
iOS
◯：Safariと同じくfont-familyは英文字表記の場合のみ認識
日本語書体にヒラギノ系フォントがインストールされており、iOS6より明朝の指定も可
Android
◯：Safariと同じくfont-familyは英文字表記の場合のみ認識
日本語書体に明朝系フォントがインストールされていない、またAndroid3以前の標準フォント 'Droid Sans' の日本語書体である Droid Sans Japanese は（font-weight:bold;を指定しても）太字にならない（機種で個別に対応するものもある、Android4以降の標準フォントである Roboto には日本語書体にモトヤフォントが採用されており太字可）

IE6,7（IE8では後方互換モード時）においては、フォントサイズの実装に問題があり、12px以下のフォントサイズにfont-familyの指定に和文フォント指定が含まれていない場合、1px相当フォントサイズを大きく表示させる振る舞いをするようです。また、font-sizeをsmallなどの絶対サイズのキーワードで指定した場合に、レンダリングモードによって表示されるサイズが異なります。

サンプル

.caption       { font : 100% caption ; }
.icon          { font : icon ; }
.menu          { font : menu ; }
.message-box   { font : message-box ; }
.small-caption { font : small-caption ; }
.status-bar    { font : status-bar ; }

システムフォントを使用する場合は、fontプロパティはショートハンドとして機能するのではなく、システムフォントのみを指定するプロパティとして機能することに注意してください。