HOME
本記事は執筆時点（2020年12月26日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
font-styleプロパティとは？
CSSのfont-styleは、文字にイタリック（斜体）などのスタイルを適用させることができるプロパティです。
次のように、通常体（normal）と斜体（italic、oblique）を指定して、切り替えることが可能です。
文字のフォントサイズやフォントの種類を変更したい時は別のプロパティを使用しますのでそれぞれ以下のページをご覧ください。
CSSのfont-sizeの使い方【文字のサイズを変更する方法】
font-sizeは、その名の通り文字の表示サイズを指定するプロパティです。px、%、em（rem）、vw（vh）などの単位によって絶対・相対的な値を指定することができます...【もっと読む】
CSSのfont-familyの使い方【文字のフォントを変更する方法】
CSSでは、font-family:「フォント名」という形で文字に適用させたいフォントを指定することで閲覧するデバイスに対して指定フォントを表示させるようにできます...【もっと読む】
太字など文字の太さを変更するには「font-weight」、文字に影をつけたいときは「text-shadow」を使用します。
詳しくは以下のページをご覧ください。
CSSのfont-weightの使い方【文字を太字にする方法】
font-weightは、文字の太さを変更するためのプロパティです。太さを指定したのに思い通りに反映されない場合は、元々フォントに太字が用意されていないという場合がほとんどです...【もっと読む】
CSSのtext-shadowの使い方【文字に影を付ける方法】
ext-shadowは、文字に影をつけるためのプロパティです。文字の影はドロップシャドウとも呼ばれます。影の濃さや色、範囲・位置を自由に設定することが可能です...【もっと読む】
ここからはfont-styleで指定できる値とその表示について説明していきます。
normal
font-styleにnormalを指定すると、文字は通常体として表示されます。
デフォルトでは、font-styleはnormalになっているはずですので、font-styleに何も指定しない場合は通常体で表示されます。
HTML
<h5 class="sample">font-style</h5>
CSS
.sample{
font-style:normal;/*通常体*/
}
プレビュー
italicとobliqueの違い
font-styleにitalicかobliqueを指定すると、文字は斜め文字として表示されます。
両者の違いは、italicが筆記体風、obliqueは斜体（単に文字を斜めにしたもの）と定義されています。
しかしながら、日本語フォントにはそもそも筆記体が用意されていないですし、英語でもitalic用を用意しているフォントやブラウザが限定されているため、両者の使い分けは難しい状況です。
とりあえず文字を傾けたいのであればitalicにしておけば良いのではないでしょうか？
HTML
<h5 class="sample">font-style</h5>
CSS
.sample{
font-style:italic;/*イタリック*/
}
プレビュー
日本語は斜体にできない？
残念ながら日本語フォントの種類によっては、斜体が用意されていないことがあるので、そのようなフォントはfont-styleで斜め文字に変更することはできません。
前述の例で適用している「MS PGothic」は斜体にできますが、「メイリオ」は斜体にできないので注意が必要です。
まとめ
以上が、font-styleプロパティの使い方です。
日本語の場合は適用できるフォントが限定されているなど成約がありますので、font-styleを適用する場面としては英語が主になるのではないでしょうか？