font-style

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

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

構文

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-styleoblique であるときにだけ対応しています。 font-style: normal 又は italic の場合は、第二の値は許可されません。

公式定義

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

形式文法

normal | italic | oblique <angle>{0,2}

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

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

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

スタイルなしの garamond

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

人工的に傾けた garamond

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

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

イタリックの garamond

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
font-style の定義
草案 角度の値を付けた oblique キーワードを追加
CSS Fonts Module Level 3
font-style の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報