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-style プロパティと同じです。

構文

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-styleoblique であるときにだけ対応しています。 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報