CSSで文字を斜め(斜体)にするやり方

CSSで文字を斜めに傾けて表示したいときは、font-styleプロパティを変更します。

書き方
セレクタ名 {
  font-style: 値;
}

font-styleプロパティの値の種類には以下のようなものがあります。

値の種類
normal標準フォントで表示する
italicイタリック体で表示する
oblique斜体フォントで表示する

「italic」と「oblique」の違いについて

「italic」と「oblique」の違いについて調べてみました。

  • 「italic」は斜めに傾けた状態できれいに見えるようにデザインされたフォントで、筆記体のようなフォントが多い。
  • 「oblique」は通常のフォントをシンプルに斜めに傾けたもの。
  • 斜体を指定したフォントに「italic」や「oblique」がない場合は、Webブラウザが判断してそのフォントの標準のものを斜めに傾けて表示する。
  • 日本語フォントの多くは「italic」と「oblique」が用意されていることが少ないので、標準のフォントを斜めに傾けて表示するために「italic」と「oblique」の表示は同じになる。

obliqueについて知らなかったので勉強になりました。