font-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

font-style は CSS の記述子で、 @font-face ルールの中で指定されたフォントのフォントスタイルを指定することができます。

特定のフォントファミリーについて、同じフォントファミリーの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-style 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

構文

css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;

値

normal

フォントファミリーの通常の版を選択します。

italic

フォントフェイスが通常のフォントのイタリック版であることを指定します。

oblique

フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。

oblique と角度

oblique として分類されたフォントを選択し、テキストの角度を追加で指定します。

oblique と角度の範囲

oblique として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は font-style が oblique であるときにだけ対応しています。 font-style: normal 又は italic の場合は、第二の値は許可されません。

公式定義

関連するアット規則@font-face
初期値normal
計算値指定通り

形式文法

font-style = 
  auto                                      |
  normal                                    |
  italic                                    |
  oblique [ <angle [-90deg,90deg]>{1,2} ]?

例

イタリックフォントスタイルの指定

例として、 garamond フォントファミリーを指定すると、基本の形として、以下の結果が得られます。

css
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}

スタイルのない Garamond

このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。

人工的に傾けた garamond

一方で、フォントファミリーに真にイタリックである版がある場合、 src 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。

css
@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  font-style: italic;
}

イタリックの garamond

仕様書

Specification
CSS Fonts Module Level 4
# font-prop-desc

ブラウザーの互換性

BCD tables only load in the browser

関連情報