【font】システムフォントを使用する

fontプロパティでは、フォントの属性をまとめて指定する以外にも、システムが使用しているフォント(システムフォント)を指定する事ができます。

システムフォントを使用するには、fontプロパティの値をcaption、icon、menu、message-box、small-caption、status-barのどれかに指定して下さい。 これらのキーワードは、一度に複数指定する事はできません。

またシステムフォントを使用する場合は、フォントファミリー、サイズ、太さ、スタイルなどがまとめて設定されますが、必要であれば、各プロパティの値を上書きして変更します。

なおfontプロパティでfont-style、font-variant、font-weight、font-size、line-height、font-familyなど複数の値をまとめて設定した場合には、システムフォントを示すキーワードは利用できませんのでご注意ください。

書式

  • font : キーワード(下記の値を参照)、またはinherit ……… システムフォントを利用する

icon
アイコンの名前として使用されるフォント
menu
メニューで使用されているフォント
message-box
ダイアログボックスで使用されているフォント
caption
キャプションやラベルに使用されているフォント
small-caption
キャプションやラベルに使用されている小さいフォント
status-bar
ウィンドウのステータスバーで使用されているフォント

使用した時の例

.sample1 {font:icon;}
.sample2 {font:menu;}
.sample3 {font:message-box;}
.sample4 {font:caption;}
.sample5 {font:small-caption;}
.sample6 {font:status-bar;}
<p class="sample1">icon・・・アイコンに使われている</p>
<p class="sample2">menu・・・メニューで使われている</p>
<p class="sample3">message-box・・・ダイアログボックスで使われている</p>
<p class="sample4">caption・・・キャプションやラベルで使われている</p>
<p class="sample5">small-caption・・・キャプションやラベルで使われてる小さなフォント</p>
<p class="sample6">status-bar・・・ウィンドウやステータスバーで使わている</p>

ブラウザ上の表示例

icon・・・アイコンに使われている

menu・・・メニューで使われている

message-box・・・ダイアログボックスで使われている

caption・・・キャプションやラベルで使われている

small-caption・・・キャプションやラベルで使われてる小さなフォント

status-bar・・・ウィンドウやステータスバーで使わている

※ユーザーの環境によっては見え方が異なります

対応ブラウザなどのデータ

初期値 システムに依存 値の継承 継承する
適用可能な要素 すべての要素
対応ブラウザ Internet Explorer5~ , Google Chrome , Firefox1~ , Opera , Safari1~