この記事の要点

font-style はテキストを斜体（イタリック）で表示するかを指定する CSS プロパティ 値は normal / italic / oblique の 3 種類。oblique <角度> で傾き角度も指定可能 italic はフォント自身のイタリック字形、oblique は通常字形を機械的に傾けた表示 日本語フォントはイタリック字形を持たないことが多いため、oblique のように描画される 意味づけ（強調）が目的なら <em> 要素を使い、見た目だけなら font-style を使う

font-style プロパティとは

font-style は要素のテキストを斜体（イタリック体）で表示するかを指定する CSS プロパティです。文字を傾けて見せるだけでなく、フォントによっては専用のイタリック字形に置き換わります。

基本構文

セレクタ {
  font-style: 値;
}

/* 例 */
em       { font-style: italic; }
.normal  { font-style: normal; }
.tilt    { font-style: oblique 14deg; }

指定できる値

値	意味	備考
normal	通常体（既定値）	明示的にイタリックを解除したいときに使う
italic	イタリック体	フォントのイタリック字形を使う
oblique	斜体	通常字形を機械的に傾けて描画する
oblique <角度>	角度指定の斜体	-90deg 〜 90deg の範囲（CSS Fonts Level 4）

italic と oblique の違い

見た目は似ていますが、内部処理が大きく異なります。

項目	italic	oblique
原理	フォントが用意した別字形に置換	通常字形を傾けて描画
字形の美しさ	専用デザインなので自然	機械的なので不自然になることも
イタリック未対応フォント	oblique で代替表示される	常に動作する
角度指定	不可	可（CSS Fonts Level 4）

たとえば Times New Roman や Georgia は本物のイタリック字形を持つので、italic 指定時に「a」が筆記体風の字形に変わります。一方、Arial は単純に傾けただけのため italic と oblique の差はほぼ出ません。

角度を指定した oblique

CSS Fonts Level 4 で oblique に角度を付けられるようになりました。

.lean-a { font-style: oblique 5deg; }   /* やや傾ける */
.lean-b { font-style: oblique 14deg; }  /* 既定相当 */
.lean-c { font-style: oblique 30deg; }  /* 強めに傾ける */
.lean-d { font-style: oblique -10deg; } /* 逆向きに傾ける（バックスラッシュ風） */

負の角度を指定すると逆向きに傾く表現も可能で、装飾的なデザインに使えます。

日本語フォントでの挙動

多くの日本語フォント（游ゴシック / メイリオ / Noto Sans JP など）はイタリック字形を持ちません。そのため font-style: italic を指定しても、ブラウザは自動的に oblique 相当の描画にフォールバックします。

「日本語をイタリックにしたい」という UI 要件があるとき、字形の美しさは期待しすぎないようにしましょう。むしろ太字（font-weight）や色違いで強調する方がきれいに見えるケースが多いです。

em / i 要素との関係

HTML には <em>（強調）と <i>（別語句）という斜体に関係する要素があります。

要素	意味	規定スタイル
<em>	強調（音声読み上げで強く読まれる）	font-style: italic
<i>	異なる声・別の語（書名・専門用語など）	font-style: italic
<span style="font-style:italic">	意味なし・見た目だけ	font-style: italic

意味（強調）として斜体にするなら <em> を使い、純粋に見た目だけが欲しい場合に CSS の font-style を使うのが正しい役割分担です。

イタリック体の解除

祖先要素のスタイル（<em> や <blockquote> の中など）でイタリックになっている場合、明示的に解除したいときは normal を指定します。

em.no-italic { font-style: normal; }

/* 引用の中だけ通常体に戻す */
blockquote em { font-style: normal; font-weight: bold; }

ショートハンド font プロパティ

font プロパティでまとめて指定できます。順序は font-style → font-variant → font-weight → font-size/line-height → font-family。

/* italic + 太字 + 16px / 1.5行間 + サンセリフ */
p {
  font: italic bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
}

可変フォント（Variable Fonts）と font-style

可変フォントでは oblique の角度を細かく制御できます。font-variation-settings と組み合わせれば 0.1deg 単位で傾きを変えるアニメーションも作れます。

@keyframes tilt {
  0%   { font-style: oblique 0deg; }
  100% { font-style: oblique 12deg; }
}
.title { animation: tilt 1s ease-in-out infinite alternate; }

よくあるトラブル

症状	原因と対処
italic にしたのに変化なし	そのフォントがイタリック字形を持たない / 親要素で font-style:normal が当たっている
イタリックが汚い	oblique のフォールバック。専用イタリック字形を含むフォントに変える
oblique 角度が効かない	古いブラウザ（IE / 古い Safari）では未対応。italic でフォールバック
太字 + 斜体にしたい	font: italic bold ... またはショートハンドで両方指定

FAQ

Q: 数字や記号にも italic は効く？
A: 効きます。フォントが数字のイタリック字形を持っていればそれが使われ、なければ機械的傾斜になります。

Q: アクセシビリティの観点では？
A: 長文を斜体にすると読みにくくなると言われます。短い見出しや強調語に絞るのが推奨です。

Q: em と italic、どちらを使うべき？
A: 意味（強調・別語）があるなら HTML 要素（<em> / <i>）、見た目だけなら CSS の font-style を使い分けます。

関連

• フォント — 親カテゴリ
• font-weight — 太さ指定
• font-family — フォント種別
• font-size — サイズ指定
• font プロパティ — ショートハンド