CSSリファレンス -- フォント

[背景] [フォント] [テキスト] [ボックス] [配置] [リスト] [TABLE] [擬似] [UI]

[印刷] [音声]

CSS仕様の表記

CSS1 --- CSS Level 1、CSS Level 2で定義されている属性と値

CSS2 --- CSS Level 2で定義されている属性と値


font-family フォントの種類を設定する

CSS仕様: CSS1

機能 Windows Macintosh
serif 明朝系のフォント IE4以降 NS6以降 IE4以降 NS6以降
sans-serif ゴシック系のフォント IE4以降 NS6以降 IE4以降 NS6以降
cursive 草書体(筆記体)のフォント IE4以降 NS6以降 IE4以降 NS6以降
fantasy 装飾的なフォント IE以降 NS6以降 IE4以降 NS6以降
monospace 等副フォント IE3以降 NS4以降 IE3以降 NS4以降

適応要素 :すべてのエレメント

継承 :する (デフォルト値=ブラウザ依存)

テキストにフォントを設定し、見栄えを良くしたいのは制作者ならみな同じ感覚を持っています。しかしながら、ユーザ環境は Windows、Macintosh、UNIX系と千差万別で、OSによっては同じフォントファミリ名でも異なることすらあります。世界中に存在するフォントは多種多様であり、それらを1つの規則に基づき定義することは至難の業です。例えば、斜体の文字1つとっても、「italic」「Oblique」「Slanted」「Incline」「Cursive」「Kursiv」等が存在し、一意にこれと言って決められないのが実状です。

<サンプル>

p { font-family: Tahoma,"MS UI Gothic",Osaka,sans-serif }

値をカンマ "," で区切って複数設定します。また MS UI Gothic のようにファミリ名に空白がある場合は、ダブルコーテーションで囲むようにしないと、ブラウザが無視する場合があります。

値には、フォント名を設定する方法とフォントファミリの系統名で設定する方法があります。設定したフォントがユーザ側にない場合は、設定したフォントに近いフォントになったり、スタイルシートの指定が無視されてブラウザの設定されてる初期値のフォントで表示されたりします。


font-size フォントの大きさを設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 16px(ピクセル)12pt(ポイント)など IE3以降 NS4以降 IE3以降 NS4以降
数値+% 親要素のフォントサイズに対する割合で指定する IE4以降 NS4以降 IE4以降 NS4以降
smaller 親要素の値より一段小さくする IE4以降 NS4以降 IE4以降 NS4以降
larger 親要素の値より一段大きくする IE4以降 NS4以降 IE4以降 NS4以降
xx-small 標準値の値より一番小さくする IE4以降 NS4以降 IE4以降 NS4以降
x-small 標準値の値より2回り小さくする IE4以降 NS4以降 IE4以降 NS4以降
small 標準値の値より1回り小さくする IE4以降 NS4以降 IE4以降 NS4以降
medium 標準値 IE4以降 NS4以降 IE4以降 NS4以降
large 標準値の値より1回り大きくする IE4以降 NS4以降 IE4以降 NS4以降
x-large large の値より1回り大きくする IE4以降 NS4以降 IE4以降 NS4以降
xx-large 標準値の値より1番大きくする IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべてのエレメント

継承 :する (デフォルト値 = medium)


font-style フォントの字体を設定する

CSS仕様: CSS1

機能 Windows Macintosh
normal 標準 IE3以降 NS4以降 IE3以降 NS4以降
italic イタリック体 (斜体文字) IE3以降 NS6以降 IE3以降 NS6以降
oblique 斜体 IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべてのエレメント

継承 :する (デフォルト値 = normal)

これは normal の字体です。

これは itaric の字体です。

これは oblique の字体です。


font-weight フォントの字体を設定する

CSS仕様: CSS1

機能 Windows Macintosh
normal 標準 (400と同じ/デフォルト) IE4以降 NS4以降 IE4以降 NS4以降
bold 強調 (700と同じ) IE3以降 NS6以降 IE3以降 NS6以降
bolder 現在有効な値より一段階太くする IE4以降 NS6以降 IE4以降 NS6以降
lighter 現在有効な値より一段階細くする NS6以降 IE5以降 NS4以降
100〜900 標準を400として100〜900まで100刻みで太さを指定する Sample13 IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべてのエレメント

継承 :する (デフォルト値 = normal)


font-stretch フォントの伸縮(長体や平体)を設定する

CSS仕様: CSS1

機能 Windows Macintosh
normal 標準(正体) 未実装 未実装
ultra-condensed
extra-condensed
condensed
semi-condensed
normalに対し semi-condensed 〜ultracondensed まで段階的に文字幅を狭くする 未実装 未実装
ultra-expanded
extra
expanded
expamded
semi-expanded
normalに対し semiexpanded 〜ultra-expanded まで段階的に文字幅を広くする 未実装 未実装
narrower 親要素の幅より一段階狭いフォント 未実装 未実装
wider 親要素の幅より一段階広いフォント 未実装 未実装

適応要素 :すべてのエレメント

継承 :する (デフォルト値 = normal)


font-size-adjust フォントの違いによるサイズの調整

CSS仕様: CSS1

機能 Windows Macintosh
アスペクト値 小文字 [x] の高さ÷フォントサイズ 未実装 未実装
none 調整しない 未実装 未実装

適応要素 :すべてのエレメント

継承 :する(デフォルト値=none)


font-variant フォントにスモールキャップを設定する

CSS仕様: CSS1

機能 Windows Macintosh
normal 標準 (デフォルト値) IE4以降 NS6以降 IE4以降 NS6以降
small-caps スモールキャップのフォントを設定する IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべてのエレメント

継承 :する (デフォルト値 = normal)

スモールキャップとは小文字が大文字を小さくしたような形状をしている種類のフォントです。このプロパティは要素内のフォントとしてスモールキャップを設定します。

<ul style="font-size: large">
 <li>font-variant: normal
 <li style="font-variant: small-caps">font-variant: small-caps
</ul>

サンプルでは小文字が、variant属性によって大文字で表記されます。



This Page is HTML4.01 Valid! 初版更新日 2002年5月3日   最新更新日 2004年2月23日
Copyright(C) 2002-2004 banban@scollabo.com