Updated / Published

font-styleプロパティは文字を斜体で表示するか、イタリック体で表示するか、または傾きのない通常体に戻して表示するかといった文字のスタイルを指定します。

初期値
normal
適用対象
すべての要素
継承
する
メディア
visual

font-styleプロパティの値

値には次の3種類のキーワードを指定できます。

normal
通常体(標準)で表示
italic
イタリック体専用にデザインされたフォント(イタリック書体)で表示。指定フォントにイタリック体がない場合は、obliqueが指定されたものとして振る舞う
oblique
通常体をシンプルに斜めにしたフォント(斜体)で表示。指定フォントに斜体がなければ、通常体を斜めに傾けることで実現して良いことになっている

"italic" を指定した場合、font-familyプロパティで指定している欧文フォントの中にイタリック書体がある場合にのみ英数字の欧文フォント対象部分をイタリック書体で表示して、和文フォントのようにイタリック書体がない場合は漢字・平仮名・カタカナの和文フォント対象部分を通常の斜体で表示します。イタリック体は筆書形の右に傾いた書体で、通常体を傾けただけの斜体のデザインとは違ったものです。

一方、"oblique" は通常体の字形をそのまま斜めに傾けた形で表示するべきで、指定されている欧文フォントの中にイタリック書体が存在しても、"oblique" が指定された場合は英数字の欧文フォント対象部分を通常体を傾けただけの斜体で表示することが求められますが、仕様通りにこれを区別して表示できるUAは現状ありません。

font-styleプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

* { font-family : "Times New Roman", Times, serif ; }
.nomal   { font-style : normal ; }
.italic  { font-style : italic ; }
.oblique { font-style : oblique ; }

f, i, lあたりの字形がもっともわかりやすいですが、obliqueを指定してもイタリック書体があるフォントではヒゲをつけた形で表示されてしまい、仕様が求めるような通常体の字形をそのまま斜めに傾けた形で区別して表示できるUAはありません。