CSSのfont-styleプロパティの使い方｜normal・italic・obliqueの違いを解説

CSSのfont-styleプロパティを使うと、テキストに3種類のフォントスタイルを適用できます。指定できる値は「normal（標準）」「italic（イタリック）」「oblique（斜体）」の3つです。

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

3つの値の意味

• normal：通常のテキストで使用されるデフォルトのローマン体（標準スタイル）です。
• italic：右に少し傾いたフォントで、テキストを強調するために使われます。
• oblique：同じく右に傾いたフォントで、強調を表現するために使われます。

italicとobliqueはどちらも強調に使われますが、一体何が違うのでしょうか？

• italic（イタリック）は、専用にデザインされたグリフ（字形）を持つ、独立したフォントです。
• oblique（斜体）は、ローマン体を単に傾けただけのフォントです。

どちらのフォントスタイルを使うべき？

私自身はobliqueを一切使いません。obliqueは疑似イタリック（faux italic）と同じカテゴリのものだと考えています。公式に「疑似イタリック」と呼ばれているわけではありませんが、本質は同じです。

下の画像は、Droid Serifという書体を使ったフォントスタイルの比較です。

違いがわかりましたか？わからなくても大丈夫です。気づかない人も多くいますが、その一方で気づく人も確実に存在します。だからこそ、この違いは重要なのです。

• italicは本物のフォントです。他のイタリック体と同様にローマン体をベースにしていますが、独自のグリフを持つ、書体デザイナーによって設計されたフォントです。
• obliqueは、標準フォントを単に傾けたり歪めたりしただけのものです。これは、書体デザイナーがデザインしたものではなく、コンピュータが機械的に生成したジェネリックなイタリックである「疑似イタリック」とまったく同じ性質です。

obliqueと疑似イタリックの違いを指摘できる方がいれば、ぜひメールでお知らせください。記事を更新します！🙂