【font-style】フォントを斜体・イタリックにする

font-styleプロパティでは、標準、イタリック(italic)、斜体(oblique)などフォントのスタイルを設定することができます。

初期値での表示はnormalで、italicを指定すると斜体のイタリック体のフォントが使用され、obliqueを指定すると通常のフォントが斜体で表示されます。 ですが現在のところ、日本語フォントにイタリック(italic)や斜体(oblique)が用意されている事がほとんどないため、どちらを指定してもブラウザ上では同じように表示されます。

また「italic」「oblique」が用意されていない欧文フォントの場合でも、同じように通常のフォントが斜めに傾けて表示されます。

書式

  • font-style : ……… フォントを斜体で表示する

★:italic、oblique、normal、inherit

normal
通常のフォントで表示されます(初期値)
italic
イタリック体のフォントで表示されます。「italic」とはシンプルな斜体ではなく、文字がつながる感じのような、筆記体調にデザインされた種類のフォントの事です。該当するフォントがない場合は、「oblique」または標準のフォントを斜めに傾けたものが使用されます。
oblique
斜体のフォントで表示されます。「斜体」とは主にゴシック系フォントに見られる、シンプルに斜めに傾けてデザインされたようなフォントの事です。該当するフォントがない場合は、標準のフォントが斜めに傾けられて表示されます。

使用した時の例

.sample1 {font-style: italic;}
.sample2 {font-style: oblique;}
<div class="sample1">Times New Roman(イタリック体)</div>
<div class="sample2">Times New Roman(斜体)</div>

ブラウザ上の表示例

Times New Roman(イタリック体)
Times New Roman(斜体)

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1~