CSS font-style プロパティ：テキストの書体を制御する
font-style プロパティは、テキストの書体を指定するために使用されます。たとえば、テキストを斜体、斜体、または通常の書体に設定できます。
適用対象
全ての要素
値
| 値 | 説明 |
|---|---|
normal |
テキストは通常の書体で表示されます（デフォルト）。 |
italic |
テキストは斜体で表示されます。現在のフォントに斜体のスタイルがない場合は、代わりに oblique が使用されます。 |
oblique |
テキストは斜体で表示されます。 |
inherit |
親要素から font-style プロパティの値を継承します。 |
例
1. テキストを斜体にする
<!DOCTYPE html>
<html>
<head>
<style>
.italic-text {
font-style: italic;
}
</style>
</head>
<body>
<p class="italic-text">これは斜体のテキストです。</p>
</body>
</html>
2. テキストを斜体にする（oblique）
<!DOCTYPE html>
<html>
<head>
<style>
.oblique-text {
font-style: oblique;
}
</style>
</head>
<body>
<p class="oblique-text">これは斜体のテキストです（oblique）。</p>
</body>
</html>
3. font ショートハンドプロパティを使用して書体を設定する
<!DOCTYPE html>
<html>
<head>
<style>
.shorthand-text {
font: italic 16px Arial, sans-serif;
}
</style>
</head>
<body>
<p class="shorthand-text">このテキストは、font ショートハンドプロパティを使用して、斜体、フォントサイズ、フォントファミリーを設定しています。</p>
</body>
</html>
注意点
obliqueとitalicのスタイルの違いは、italicが事前に定義された文字の傾斜スタイルを使用するのに対し、obliqueは通常の書体をアルゴリズムで傾けることです。すべてのフォントに両方のスタイルがあるわけではありません。fontショートハンドプロパティを使用すると、font-styleを含む複数のフォントプロパティを一度に設定できます。
font-style と font-family の関係
font-style プロパティは、指定された font-family によって提供される書体スタイルに依存します。指定されたフォントファミリーに特定の書体スタイルが含まれていない場合、ブラウザは可能な限り近いスタイルで表示するか、デフォルトのスタイルを使用します。詳細については、MDN Web Docs - font-family を参照してください。
参考資料
よくある質問
-
Q:
font-style: oblique;を指定しても、テキストが斜めにならない場合は？A: 使用しているフォントに oblique スタイルが含まれていない可能性があります。別のフォントを試すか、
font-style: italic;を使用してください。 -
Q:
font-styleプロパティとfont-weightプロパティを組み合わせて使用できますか？A: はい、これらのプロパティを組み合わせて使用して、太字の斜体などの書体を設定できます。例：
font: bold italic 16px Arial, sans-serif; -
Q: 特定のテキスト要素にのみ
font-styleを適用するにはどうすればよいですか？A: CSS セレクタを使用して、特定の要素にスタイルを適用できます。たとえば、特定の段落に斜体を適用するには、次のようにします。
p { font-style: italic; }