| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {font-style: 値 } |
| 値 の形式 | normal，italic，oblique |
| 初 期 値 | normal |
| 対応ブラウザー | C1+ / e3+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | する |
font-styleプロパティ は，フォントの 立体・イタリック・斜体 を指定します。
指定できる値の形式は，以下の通りです。
| 値 | 説 明 |
|---|---|
| normal | 立体（標準のフォント） にします。 |
| italic | イタリック（続け書き書体のフォント） にします。 イタリックのフォントがないときには 斜体 のものを使用します。 |
| oblique | 斜体（立体を斜めに変形した字体のフォント） にします。 斜体のフォントがないときには イタリック のものを使用します。 |
日本語フォントの場合は，通常，イタリックや斜体の字形は別に用意されていないので，標準の立体のものが変形されて使用されます。 そのため，表示品質の観点から，日本語フォントではイタリックや斜体が用いられる頻度は決して高くありません。
英語フォントの場合，イタリックの字形が別に用意されているケースが結構あります。 たとえば，Windows の Times New Roman などは，単なるイタリックだけではなく，ボールド体（太字）のイタリックまで別々に用意されています。
イタリック（italic）と斜体（oblique）の違いについては，イタリックが筆記体を基にした傾斜をもつ字体であるのに対して，斜体の方は立体の字形を基にして斜めに傾いた形の字形でデザインされているようです。
ただし，いずれにしても，日本語フォントでイタリックや斜体はあまり使わないので，主に，英語フォントで用いることになります。
たとえば，次のように使用できます。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
span.fsty1 {font-size: 20px; font-weight: normal;
font-style: normal; font-family: "Times New Roman" ;}
span.fsty2 {font-size: 20px; font-weight: normal;
font-style: italic; font-family: "Times New Roman" ;}
span.fsty3 {font-size: 20px; font-weight: normal;
font-style: oblique; font-family: "Times New Roman" ;}
span.fsty4 {font-size: 20px; font-weight: bold;
font-style: normal; font-family: "Times New Roman" ;}
span.fsty5 {font-size: 20px; font-weight: bold;
font-style: italic; font-family: "Times New Roman" ;}
span.fsty6 {font-size: 20px; font-weight: bold;
font-style: oblique; font-family: "Times New Roman" ;}
span.fsty7 {font-size: 20px; font-weight: normal;
font-style: normal; font-family: Arial ;}
span.fsty8 {font-size: 20px; font-weight: normal;
font-style: italic; font-family: Arial ;}
span.fsty9 {font-size: 20px; font-weight: bold;
font-style: italic; font-family: Arial ;}
-->
</style> |
| HTML <body> ～ </body> |
<span class="fsty1" >{font-weight: normal; font-style: normal; font-family: "Times New Roman" ;} のフォント</span> <br><span class="fsty2" >{font-weight: normal; font-style: italic; font-family: "Times New Roman" ;} のフォント</span> <br><span class="fsty3" >{font-weight: normal; font-style: oblique; font-family: "Times New Roman" ;} のフォント</span> <br><span class="fsty4" >{font-weight: bold; font-style: normal; font-family: "Times New Roman" ;} のフォント</span> <br><span class="fsty5" >{font-weight: bold; font-style: italic; font-family: "Times New Roman" ;} のフォント</span> <br><span class="fsty6" >{font-weight: bold; font-style: oblique; font-family: "Times New Roman" ;} のフォント</span> <br><span class="fsty7" >{font-weight: normal; font-style: normal; font-family: Arial ;} のフォント</span><br> <br><span class="fsty8" >{font-weight: normal; font-style: italic; font-family: Arial ;} のフォント</span><br> <br><span class="fsty9" >{font-weight: bold; font-style: italic; font-family: Arial ;} のフォント</span><br> |
| ブラウザー 表示例 |
|---|
| {font-weight: normal; font-style: normal;
font-family: "Times New Roman" ;} のフォント
{font-weight: normal; font-style: italic; font-family: "Times New Roman" ;} のフォント {font-weight: normal; font-style: oblique; font-family: "Times New Roman" ;} のフォント {font-weight: bold; font-style: normal; font-family: "Times New Roman" ;} のフォント {font-weight: bold; font-style: italic; font-family: "Times New Roman" ;} のフォント {font-weight: bold; font-style: oblique; font-family: "Times New Roman" ;} のフォント {font-weight: normal; font-style: normal; font-family: Arial ;} のフォント {font-weight: normal; font-style: italic; font-family: Arial ;} のフォント {font-weight: bold; font-style: italic; font-family: Arial ;} のフォント |
上の例の場合，"Times New Roman" フォントには斜体（oblique）はないため， イタリック（italic）のフォントが代わりに使用されます。