font（フォントの一括指定）

フォントに関する指定を一括して行います。指定する順番は下記の[1][2][3][4]と決まっています。（[1]は順不同）

名前:font
値: [ [ <'font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar
初期値:個々のプロパティ参照
適用対象:全ての要素
継承:する
パーセンテージ:個々のプロパティ参照
メディア:visual（視覚的）
計算値:個々のプロパティ参照
アニメーション:個々のプロパティ参照

Value 1（値）

[1] font-styleの値
イタリックか斜体
[1] font-variantの値
スモールキャップの指定
[1] font-weightの値
フォントの太さ
[1] font-stretchの値
フォントの幅 CSS3
[2] font-sizeの値
フォントのサイズ（省略はできません）
[3] line-heightの値
行の高さ（font-sizeの値とline-heightの値の間には「/」が必要です）
[4] font-familyの値
フォントの種類（省略はできません）

下記はシステムフォントの指定です。ユーザー環境のタイトルバーやメニューなどで使われているフォントを呼び出します。

Value 2（値）

caption
ウィンドウのタイトルバーなどで使用されてるフォント
icon
アイコンの名前で使用されてるフォント
menu
メニューで使用されてるフォント
message-box
メッセージボックスで使用されてるフォント
small-caption
小さいウィンドウのタイトルバーなどで使用されてるフォント
status-bar
ステータスバーやヒントで使用されてるフォント

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { font: italic small-caps bold 30pt/1.5 "Times New Roman",Georgia,Serif; }
   p.test2 { font: 18pt/150% Century Gothic, verdana, sans-serif; }
   p.test3 { font: xx-large/20pt sans-serif; color:#46bdf5; }
   p.test4 { font: caption; }
   p.test5 { font: icon; }
   p.test6 { font: menu; }
   p.test7 { font: message-box; }
   p.test8 { font: small-caption; }
   p.test9 { font: status-bar; }
  </style>
 </head>
 <body>
   <p class="test1">small-caps Times New Roman</p>
   <p class="test2">Century Gothic</p>
   <p class="test3">xx-large</p>
   <p class="test4">caption タイトルバー</p>
   <p class="test5">icon アイコンの名前</p>
   <p class="test6">menu メニュー</p>
   <p class="test7">message-box メッセージボックス</p>
   <p class="test8">small-caption 小さなタイトルバー</p>
   <p class="test9">status-bar ステータスバー</p>
 </body>
</html>

display

small-caps Times New Roman

Century Gothic

xx-large

caption タイトルバー

icon アイコンの名前

menu メニュー

message-box メッセージボックス

small-caption 小さなタイトルバー

status-bar ステータスバー

上に戻る