font-style
Updated / Published
font-style
プロパティは文字を斜体で表示するか、イタリック体で表示するか、または傾きのない通常体に戻して表示するかといった文字のスタイルを指定します。
- 値
normal
italic
oblique
inherit
- 初期値
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はありません。