font-style：フォントを筆記体や斜体で表示するかどうかを指定する

font-styleプロパティの説明

font-styleは、フォントを通常体（normal）で表示するか、筆記体（italic）や斜体（oblique）などのスタイルで表示するかを指定します。

ここで指定された値は、font-familyで指定された文字セットの中に含まれる筆記体（italic）や斜体（oblique）を呼び出します。利用可能な文字セットがない場合は、スタイルをシミュレートしたものが表示されます。

筆記体（italic）は欧文の書体で斜めに傾いた手書き風の文字を表します。人物のセリフや歴史的な時間を感じさせる文章、前後の文字と区別したい箇所に用いられます。斜体（oblique）との違いは斜体用に調整された文字であることです。

斜体（oblique）は単純に斜めに傾いた文字を表します。欧文の書体ではイタリック体と斜体が明確に区別されているフォントも存在しますが、日本語では概ね同じ表現になります。筆記体（italic）との違いは、筆記体のような装飾はなく、単純に斜めに傾いた文字であるということです。

font-styleに指定できる値

normal

font-familyで指定された文字セットの中で、normalに分類されたフォントを選択します。

italic

italicに分類されているフォントを選択します。このスタイルが使用できない場合は、obliqueに分類されているフォントを探し、見つからない場合はスタイルをシミュレートしたものが表示されます。

oblique

obliqueに分類されているフォントを選択します。このスタイルが使用できない場合は、italicに分類されているフォントを探し、見つからない場合はスタイルをシミュレートしたものが表示されます。

oblique <angle>

obliqueに分類されているフォントを選択し、テキストを後ろに傾ける角度を指定します。font-familyで指定された文字セットの中で、obliqueに分類されているフォントが複数ある場合は、指定された角度に最も近いものが選択されます。通常、指定された角度を基準に、より大きく傾いたフォントが優先的に採用されます。該当するフォントが見つからない場合は、通常の書体を指定された角度に傾けて表示します。有効な角度は-90から90の間です。角度の指定を省略した場合は14となります。

font-styleの使い方とサンプル

font-styleプロパティの構文は以下の通りです。

/* キーワード値 */
font-style: normal;
font-style: italic;
font-style: oblique;

/* 角度の指定 */
font-style: oblique 10deg;
font-style: oblique 20deg;

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

font-styleの実例

それでは実際にfont-styleプロパティの書き方を見ていきましょう。以下の例は、単純にキーワードを指定した場合の挙動を確認するものです。

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
#ff_sans {
	font-family: sans-serif;
}
#ff_serif {
	font-family: serif;
}
.fs_norm {
	font-style: normal;
}
.fs_ital {
	font-style: italic;
}
.fs_obli {
	font-style: oblique;
}

<section class="samp_box" id="ff_sans">
	<h2>サンセリフ体</h2>
	<p class="fs_norm">font-style: normal; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p class="fs_ital">font-style: italic; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p class="fs_obli">font-style: oblique; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
</section>
<section class="samp_box" id="ff_serif">
	<h2>セリフ体</h2>
	<p class="fs_norm">font-style: normal; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p class="fs_ital">font-style: italic; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
	<p class="fs_obli">font-style: oblique; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
</section>

フォントの傾き方の指定

斜体フォントの傾きは既定値の場合14度に設定させていますが、より傾斜角度を高める、あるいはマイナスの方向へ傾斜さる方法があります。

font-styleのobliqueは、オプションで角度の追記を受け付けます。ただし、フォントがこの機能に対応していない限り有効ではないため、可変フォント（Variable fonts）などと併用する必用があることを覚えておきましょう。

以下に示すのは記述例です。任意の傾斜を表示させるには、対応しているフォントファミリーで表示させる必用があります。

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
#fs_ob20 {
	font-style: oblique 20deg;
}
#fs_ob40 {
	font-style: oblique 40deg;
}
#fs_ob-20 {
	font-style: oblique -20deg;
}
#fs_ob-40 {
	font-style: oblique -40deg;
}