CSS - font

属性名	font
値	<font> \| <system-font>
値の詳細	<font> = [ <style> \|\| <variant> \|\| <weight> ]? <size> [ / <height> ]? <family> <system-font> = caption \| icon \| menu \| message-box \| small-caption \| status-bar
初期値	個々の要素を参照
適用可能要素	すべての要素
継承	継承する
メディア	Visual / Font
サポート	C1 / e3 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

フォントのスタイル、変換、太さ、サイズ、表示高さ、ファミリをまとめて指定します。

値	説明
<style>	フォントスタイルを指定します。font-styleを参照してください。
<variant>	フォントの変換を指定します。現在、normal と small-caps のみが指定可能です。font-variantを参照してください。
<weight>	フォントの太さを指定します。font-weightを参照してください。
<size>	フォントスサイズを指定します。font-sizeを参照してください。
<height>	フォントスの高さを指定します。line-heightを参照してください。
<family>	フォントスファミリを指定します。font-familyを参照してください。
caption	ボタンやドロップダウンなどのキャプションコントロールで使用されているフォント
icon	ラベルアイコンに使用されているフォント
menu	メニューで使用されているフォント
message-box	ダイアログボックスで使用されているフォント
small-caption	スモールコントロールで使用されているフォント
status-bar	ステータスバーで使用されているフォント

message-box など、いくつかのシステムフォントを利用できます。

.sample { font: message-box; }

システムフォント以外の場合、最低限 <size> と <family> が必須となります。

.sample { font: 100% Arial; }

行の高さは、<size> の後に /<height> で指定します。

.sample { font: 100%/1.5em Arial; }

<size> の前に、<style>, <variant>, <weight> を順不同で複数追加できます。

.sample1 { font: italic 100% Arial; }
.sample2 { font: italic small-caps 100% Arial; }
.sample3 { font: italic small-caps bold 100% Arial; }

HTML

 <table>
  <tr><td style="width:150px; font-family: sans-serif">通常</td><td>謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>size=130%</td><td style="font: 130% sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>family=fantasy</td><td style="font: 100% fantasy">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>height=300%</td><td style="font: 100%/300% sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>style=italic</td><td style="font: italic 100% sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>variant=small-caps</td><td style="font: small-caps 100% sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>weight=bold</td><td style="font: bold 100% sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>caption</td><td style="font: caption">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>icon</td><td style="font: icon">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>menu</td><td style="font: menu">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>message-box</td><td style="font: message-box">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>small-caption</td><td style="font: small-caption">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>status-bar</td><td style="font: status-bar">謹賀新年 / おめでとう / Happy New Year.</td></tr>
 </table>

表示

通常	謹賀新年 / おめでとう / Happy New Year.
size=130%	謹賀新年 / おめでとう / Happy New Year.
family=fantasy	謹賀新年 / おめでとう / Happy New Year.
height=300%	謹賀新年 / おめでとう / Happy New Year.
style=italic	謹賀新年 / おめでとう / Happy New Year.
variant=small-caps	謹賀新年 / おめでとう / Happy New Year.
weight=bold	謹賀新年 / おめでとう / Happy New Year.
caption	謹賀新年 / おめでとう / Happy New Year.
icon	謹賀新年 / おめでとう / Happy New Year.
menu	謹賀新年 / おめでとう / Happy New Year.
message-box	謹賀新年 / おめでとう / Happy New Year.
small-caption	謹賀新年 / おめでとう / Happy New Year.
status-bar	謹賀新年 / おめでとう / Happy New Year.

CSS - font

■ 概要

■ 説明

■ 使用例