Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

font-style

font-style は CSS のプロパティで、font-family の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。

フォントスタイルイタリック

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-style
1
12
1
1
18
1
CSS @ ルール
font-style

font-style は CSS の記述子で、 @font-face アットルールの中で指定されたフォントのフォントスタイルを指定することができます。
4
12
3.5
3.1
18
2
CSS プロパティ
italic
1
12
1
1
18
1
normal
1
12
1
1
18
1
oblique
1
12
1
1
18
1
oblique-angle

`oblique` は `<angle>` を受け入れることができます
62
79
61
11.1
62
11.3
その他
svg.global_attributes.font-style

font-style 属性は、テキストを通常体、イタリック体、斜体のどれを用いて表示するかどうかを指定します。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 44 より前では、「oblique」は「italic」と区別されませんでした。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 14 から 90 までの角度は、`font-style: oblique` (傾斜 14 度) と同じ効果があります。 -90 から 13 までの角度は、`font-style:normal` (傾斜なし) と同じ効果があります。 場合によっては (垂直の「書き込みモード」など)、負の角度を指定すると傾きが生じます。 バグ 425388876 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 14 から 90 までの角度は、`font-style: oblique` (傾斜 14 度) と同じ効果があります。 -90 から 13 までの角度は、`font-style:normal` (傾斜なし) と同じ効果があります。 場合によっては (垂直の「書き込みモード」など)、負の角度を指定すると傾きが生じます。 バグ 425388876 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 14 から 90 までの角度は、`font-style: oblique` (傾斜 14 度) と同じ効果があります。 -90 から 13 までの角度は、`font-style:normal` (傾斜なし) と同じ効果があります。 場合によっては (垂直の「書き込みモード」など)、負の角度を指定すると傾きが生じます。 バグ 425388876 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 14 から 90 までの角度は、`font-style: oblique` (傾斜 14 度) と同じ効果があります。 -90 から 13 までの角度は、`font-style:normal` (傾斜なし) と同じ効果があります。 場合によっては (垂直の「書き込みモード」など)、負の角度を指定すると傾きが生じます。 バグ 425388876 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 14 から 90 までの角度は、`font-style: oblique` (傾斜 14 度) と同じ効果があります。 -90 から 13 までの角度は、`font-style:normal` (傾斜なし) と同じ効果があります。 場合によっては (垂直の「書き込みモード」など)、負の角度を指定すると傾きが生じます。 バグ 425388876 を参照してください。
注釈 1件
実装メモ
  • Firefox 44 より前では、「oblique」は「italic」と区別されませんでした。

基本構文

CSS 
em { font-style: italic; }
.oblique { font-style: oblique 14deg; }
.reset { font-style: normal; }

ライブデモ

italic

CSS Italic demo.

プレビュー全画面表示

oblique

CSS Oblique demo.

プレビュー全画面表示

normal

CSS Normal demo.

プレビュー全画面表示

実務での使いどころ

  • 引用・外国語テキストの視覚的区別

    引用文や外国語の単語にitalicスタイルを適用し、通常のテキストと視覚的に区別します。

注意点

  • 日本語フォントの多くはイタリック体を持たないため、ブラウザが人工的な傾斜（合成イタリック）を適用し、品質が低下する場合があります。

アクセシビリティ

  • イタリック体だけで情報を伝えず、セマンティックHTML（em、cite）を使用してスクリーンリーダーにも強調の意味を伝えてください。

参考リンク