|
CSS : フォントのプロパティ
■font :: フォントの一括指定
- ●書式
- font : style variant weight size / height family （style,variant,weight は順不同）
・style ... フォントの傾き （省略可）
・variant ... スモールキャップ （省略可）
・weight ... フォントの太さ （省略可）
・size ... フォントの大きさ （必須）
・/ ｈeight ... 行の高さ （省略可）
・family ... フォントの種類 （必須）
- ●設定値
- ・style : font-styleの設定値
・variant : font-variantの設定値
・weight : font-weightの設定値
・size : font-sizeの設定値
・ｈeight : font-heightの設定値
・family : font-familyの設定値
*初期値 : それぞれのプロパティの初期値
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | △ | ○ | ○ |
・Safariでは、font-styleとfont-weightは無視されます。
■font-family :: フォントの種類
- ●書式
- font-family : str, str, ... , const
・str ... フォント名（省略可, 複数指定可）
・const ... フォント定数（省略可, 絶対値は環境に依存）
- ●設定値
- ・"str " ... str : フォント名
・serif ... 明朝系のフォント定数
・sans-serif ... ゴシック系のフォント定数
・cursive ... 筆記体系のフォント定数
・fantasy ... 装飾系のフォント定数
・monospace ... 等幅フォント定数
・inherit ... 親要素に依存
*初期値 : 環境に依存
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | △ | ○ | ○ |
・Safariでは日本語のフォントが無視されることがあります。
■font-size :: フォントのサイズ
- ●書式
- font-size : value
・value ... フォントのサイズを示す値
- ●設定値
- ・数値 + 単位(%, em, ex, px, mm, cm, in, pc, pt）
・xx-large ... x-largeの約1.2倍
・x-large ... largeの約1.2倍
・large ... mediumの約1.2倍
・medium ... 標準のサイズ。絶対値は環境に依存
・small ... mediumの約0.8倍
・x-small ... smallの約0.8倍
・xx-small ... x-smallの約0.8倍
・larger ... 現在のサイズより一段階大きいサイズ
・smaller ... 現在のサイズより一段階小さいサイズ
・inherit ... 親要素に依存
*初期値 : medium
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | △ | △ | ○ | ○ | ○ | ○ |
・IE5.5, IE5.0では、body要素での指定はテーブルに適用されません。
（IE6.0, NN7.x, MacIE5の各互換モードでも同様の状況）
■font-style :: フォントの傾き
- ●書式
- font-style : value
・value ... フォントの傾き示す値
- ●設定値
- ・italic ... イタリック体
・oblique ... 斜体
・normal ... 傾きなし
・inherit ... 親要素に依存
*初期値 : normal
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | △ | ○ | ○ |
・Safariでは、input要素のbuttonとselect要素には適用されません。
■font-variant :: スモールキャップ文字
- ●書式
- font-variant : value
・value ... スモールキャップ文字を示す値
- ●設定値
- ・small-caps ... スモールキャップ文字
・normal ... 通常の文字
・inherit ... 親要素に依存
*初期値 : normal
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | △ | ○ | ○ | ○ | ○ |
・IE5.0では、通常の大文字で表示されます。
■font-weight :: フォントの太さ
- ●書式
- font-weight : value
・value ... フォントの太さを示す値
- ●設定値
- ・100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900 ... 太さ
・bold ... 太字(700)
・normal ... 通常の文字(400)
・inherit ... 親要素に依存
*初期値 : normal
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | △ | ○ | ○ |
・Safariでは、input要素のbuttonとselect要素には適用されません。
・日本語フォントでは、原則として太さ400か太さ700に調節されます。
■line-height :: 行の高さ
- ●書式
- line-height : value
・value ... 行の高さを示す値
- ●設定値
- ・数値 （フォントの大きさに対する倍数）
・数値 + 単位(%, em, ex, px, mm, cm, in, pc, pt）
・normal ... 最適値。絶対値はブラウザに依存
・inherit ... 親要素に依存
*初期値 : normal
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | ○ | ○ | ○ |
・インライン要素では、領域の高さとして適用されます。
■text-decoration :: 下線・取消線・上線・点滅
- ●書式
- text-decoration : value1 value2 ...
・value1, value2 ... 装飾を示す値（複数設定可）
- ●設定値
- ・underline ... 下線
・line-through ... 取消線
・overline ... 上線
・blink ... 点滅
・none ... 装飾なし
・inherit ... 親要素に依存
*初期値 : none
- ●対象要素
- ・すべての要素
・子要素への値の適用 : なし
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| △ | △ | △ | ○ | △ | △ | ○ |
・IE、MacIE及びSafariでは、blinkは適用されません。
■text-transform :: 大文字・小文字変換
- ●書式
- text-transform : value
・value ... 文字の変換を示す値
- ●設定値
- ・lowercase ... 小文字に変換
・uppercase ... 大文字に変換
・capitalize ... 単語の一文字目を大文字に変換
・none ... 変換なし
・inherit ... 親要素に依存
*初期値 : none
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | ○ | ○ | ○ |
■letter-spacing :: 文字の間隔
- ●書式
- letter-spacing : value
・value ... 文字の間隔を示す値
- ●設定値
- ・数値 + 単位(em, ex, px, mm, cm, in, pc, pt） （マイナス可）
・normal ... 既定の間隔
・inherit ... 親要素に依存
*初期値 : normal
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | ○ | ○ | ○ | △ | ○ | ○ |
・Safariでは、フォーム要素には適用されません。
■word-spacing :: 文字の間隔
- ●書式
- word-spacing : value
・value ... 文字の間隔を示す値
- ●設定値
- ・数値 + 単位(em, ex, px, mm, cm, in, pc, pt） （マイナス可）
・normal ... 既定の間隔
・inherit ... 親要素に依存
*初期値 : normal
- ●対象要素
- ・すべての要素
・子要素への値の適用 : あり
- ●対応状況
| IE6.0 | IE5.5 | IE5.0 | NN7.x | Safari | MacIE5 | OP7.x |
| ○ | × | × | ○ | ○ | ○ | ○ |
|
