★font（フォント指定の略記及びシステムフォント）

戻る

font（フォント指定の略記及びシステムフォント）

解説
CSS Level1では、背景に関する属性をまとめて設定する属性でしたが、CSS Level2からはシステムフォントもこの属性で設定できます。ただし、フォント指定の略記とシステムフォントを同時には記述出来ませんので、それぞれ分けて設定して下さい。
E5以降やCSS Level2では、システムのフォントをユーザーがカスタマイズ（好みに応じて変更）できます。Windowsでは、[スタート]→[設定]→[コントロールパネル]→[画面]→[デザイン]タブで変更することができます。
システムフォントとは、このシステムのフォント情報を、キーワードで呼び出して指定できるフォントです。
HTMLのfontエレメント、basefontエレメントは廃止予定です。これらはスタイルシートで指定するように推奨されてます。このfont属性で指定出来ます。

値

  • フォント指定の略記
    font-styleの値
    font-variantの値
    font-weightの値
    font-sizeの値
    line-heightの値
    font-familyの値

    font-styleの値、font-variantの値、font-weightの値の指定順位は任意。値の省略可。

    font-sizeの値とfont-familyの値は必須。
    line-heightはfont-sizeの後に / （スラッシュ）を付けて指定する。
    font-sizeの値/line-heightの値

  • システムフォント
    caption：captioned controls (e.g., buttons, drop-downs, etc.)
    icon：label icons
    menu：menus (e.g., dropdown menus and menu lists)
    message-box：dialog boxes
    small-caption：labeling small controls
    status-bar：window status bars

    CSS Level2では、上記のように定義されてますが、
    Win98+E4以降では下記のシステムのフォントに対応しています。
    messagebox、smallcaption、statusbarには、- が無いので注意。

    caption：タイトルバーに使われているフォント
    icon：アイコンに使われているフォント
    menu：メニューと選択項目に使われているフォント
    messagebox：メッセージボックスに使われているフォント
    smallcaption：パレットタイトルに使われているフォント
    statusbar：ヒントに使われているフォント

初期値

定義なしL1
各属性の初期値L2

%値の基準 font-sizeは親エレメント、
line-heightはエレメント自身のフォントサイズ

適用

全てのエレメント

継承

する

対応状況
フォント指定の略記 L1 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6
システムフォント 　 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 E4 E5 ME5 E55 E6
E3については、対応属性のみ設定可。
IEではシステムフォントmessage-box、small-caption、status-barがmessagebox、smallcaption、statusbarとなる。
Windows 98 sp1 + プラス98! + Internet Explorer 4.01 sp2 では動作しました。
使用例

ソース

スタイル部に、

.font1{font:italic normal bold 13pt/25pt "ＭＳ ゴシック";}
.font2{font:20pt "ＭＳ 明朝";}
.icon{font:icon;}
.menu{font:menu;}
.messagebox{font:messagebox;}
.caption{font:caption;}
.smallcaption{font:smallcaption;}
.statusbar{font:statusbar;}
.message-box{font:messagebox;}
.small-caption{font:smallcaption;}
.status-bar{font:statusbar;}

と記述すると。

body部に、

<div class="font1">
背景に関する属性をまとめて設定する属性です。<span class="font2">フォントサイズとフォントファミリーは必須です。省略された属性値はそれぞれの初期値になります。</span><br>システムフォントを変更してブラウザをリロードすれば下記のフォントがシステムフォントになります。
</div>
<div class="icon">アイコンのフォント</div>
<div class="menu">メニューのフォント</div>
<div class="messagebox">メッセージボックスのフォント</div>
<div class="caption">タイトルバーのフォント</div>
<div class="smallcaption">パレットタイトルのフォント</div>
<div class="statusbar">ヒントのフォント</div>
<div class="message-box">メッセージボックスのフォント</div>
<div class="small-caption">パレットタイトルのフォント</div>
<div class="status-bar">ヒントのフォント</div>

と記述すると。

表示＆操作

背景に関する属性をまとめて設定する属性です。フォントサイズとフォントファミリーは必須です。省略された属性値はそれぞれの初期値になります。
システムフォントを変更してブラウザをリロードすれば下記のフォントがシステムフォントになります。
アイコンのフォント
メニューのフォント
メッセージボックスのフォント
タイトルバーのフォント
パレットタイトルのフォント
ヒントのフォント
メッセージボックスのフォント
パレットタイトルのフォント
ヒントのフォント

と表示されます。

Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/font.html
E-mailpokochan@mx1.tees.ne.jp