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-family の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。

試してみましょう

font-style: normal;

font-style: italic;

font-style: oblique;

font-style: oblique 40deg;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: Amstelvar;
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: Amstelvar;
}

italic フォントフェイスは通常、本質的に筆記体であり、装飾されていない書体より水平方向の幅が小さいのが一般的です。一方 oblique フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスの字形を人工的に傾けることによってシミュレートされます (この制御については font-synthesis をご覧ください)。

構文

css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

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

font-style プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが oblique であれば任意で角度を含めることができます。

値

normal

font-family の中で normal に分類されているフォントを選択します。

italic

italic として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに oblique に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。

oblique

oblique として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに italic に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。

oblique <angle>

oblique として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。

一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の font matching section を参照してください)。

可変フォント

可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 <angle> 修飾子を oblique キーワードに使用して選択することができます。

TrueType または OpenType の可変フォントでは、 "slnt" 変数が oblique の傾く角度を様々に実装するために使用され、 "ital" 変数の値が 1 ならば、 italic の値を使用します。 font-variation-settings を参照してください。

下記のコードブロックの "Play" を押すと、この例を MDN Playground で編集できます。角度の数値を変更して、テキストの傾きの変化を確認してください。

html
<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>
css
@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "AmstelvarAlpha";
  font-style: normal;
}

.sample {
  font:
    2rem "AmstelvarAlpha",
    sans-serif;
  /*font-variation-settings: "slnt" 12;*/
  font-style: oblique 23deg;
}

アクセシビリティの考慮

テキストの長い区間に渡って font-style の値を italic に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。

公式定義

初期値normal
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類by computed value type; normal animates as oblique 0deg

形式文法

font-style = 
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?

例

フォントスタイル

css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

仕様書

Specification
CSS Fonts Module Level 4
# font-style-prop

ブラウザーの互換性

関連情報