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

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

関連する @規則@font-face
初期値normal
メディアすべて
計算値指定値
正規順序形式文法で定義される一意のあいまいでない順序

構文

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 の場合は、第二の値は許可されません。

形式文法

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 の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 4Edge ? Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,