概要
CSS の font-style プロパティで、font-family の italic または oblique フェイスを選択できます。italic 書体は通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいことが一般的です。一方 oblique 書体はたいてい、通常の書体を傾けただけです。italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については font-synthesis をご覧ください)。
| 初期値 | normal |
|---|---|
| 適用対象 | 全要素. It also applies to ::first-letter and ::first-line. |
| 継承 | 継承する |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
font-style: normal; font-style: italic; font-style: oblique; /* グローバル値 */ font-style: inherit; font-style: initial; font-style: unset;
値
normalfont-familyでnormalに分類されるフォントを選択します。italicitalicのラベルがついたフォントを選択します。italic フェイスを使用できない場合は、代わりにobliqueのラベルがついたフォントを選択します。obliqueobliqueのラベルがついたフォントを選択します。oblique フェイスを使用できない場合は、代わりにitalicのラベルがついたフォントを選択します。
形式文法
normal | italic | oblique
例
この例では、font-style のさまざまな値を示します。CSS は以下のようになります:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
すべてのフォントが oblique や italic のフェイスを個別に持っているわけではありません。これらのフェイスが存在しない場合は提供されているフェイスを使用して、欠落しているフェイスをブラウザがシミュレートします。両方のフェイスを持つフォントのレンダリング例を示します:
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Fonts Module Level 3 font-style の定義 |
勧告候補 | 変更なし |
| CSS Level 2 (Revision 1) font-style の定義 |
勧告 | 変更なし |
| CSS Level 1 font-style の定義 |
勧告 | 最初期の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) [1] | 4.0 | 7.0 | 1.0 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1) [1] | 6.0 | 6.0 | 1.0 |
[1] Firefox 44 より前のバージョンでは、Gecko では oblique と italic の違いがありませんでした。バージョン 44 より、使用可能であれば正しいフェイスを使用するようになりました。