We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

CSS の font-style プロパティで、font-familyitalic または oblique フェイスを選択できます。italic 書体は通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいことが一般的です。一方 oblique 書体はたいてい、通常の書体を傾けただけです。italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については font-synthesis をご覧ください)。

初期値normal
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

font-style: normal;
font-style: italic;
font-style: oblique;

/* グローバル値 */
font-style: inherit;
font-style: initial;
font-style: unset;

normal
font-familynormal に分類されるフォントを選択します。
italic
italic のラベルがついたフォントを選択します。italic フェイスを使用できない場合は、代わりに oblique のラベルがついたフォントを選択します。
oblique
oblique のラベルがついたフォントを選択します。oblique フェイスを使用できない場合は、代わりに italic のラベルがついたフォントを選択します。

形式文法

normal | italic | oblique

この例では、font-style のさまざまな値を示します。CSS は以下のようになります:

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

すべてのフォントが obliqueitalic のフェイスを個別に持っているわけではありません。これらのフェイスが存在しない場合は提供されているフェイスを使用して、欠落しているフェイスをブラウザがシミュレートします。両方のフェイスを持つフォントのレンダリング例を示します:

仕様書

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-style の定義
勧告候補 変更なし
CSS Level 2 (Revision 1)
font-style の定義
勧告 変更なし
CSS Level 1
font-style の定義
勧告 最初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 では obliqueitalic の違いがありませんでした。バージョン 44 より、使用可能であれば正しいフェイスを使用するようになりました。

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

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