Font-style とは
概要
font-style は CSS のプロパティの一つで、テキストのフォントスタイルを指定するために使用します。具体的には、イタリック体、斜体、通常のスタイルを設定できます。このプロパティを使用することで、テキストに視覚的な強調を加えたり、特定の種類のコンテンツを区別したりすることができます。
フォントスタイルの種類
font-style プロパティでは、以下の値を設定できます。
| 値 | 説明 |
|---|---|
normal |
通常のフォントスタイルを適用します。装飾のない標準の書体で表示されます。 - デフォルト値です。 - 特に指定がない限り、ほとんどのテキストはこのスタイルで表示されます。 |
italic |
イタリック体のフォントスタイルを適用します。 - 通常の書体よりも右に傾斜した、より筆記体に近いスタイルで表示されます。 - イタリック体が定義されていないフォントの場合、 oblique と同じように動作します。 |
oblique |
斜体のフォントスタイルを適用します。 - 通常の書体を機械的に傾斜させたスタイルで表示されます。 - イタリック体が定義されている場合は、 italic を使用することが推奨されます。 |
inherit |
親要素から font-style の値を継承します。 |
使用例
<p>これは<span style="font-style: italic;">イタリック体</span>のテキストです。</p>
<p>これは<span style="font-style: oblique;">斜体</span>のテキストです。</p>
上記の場合、一つ目の <span> タグ内のテキストはイタリック体で、二つ目の <span> タグ内のテキストは斜体で表示されます。
注意点
italicとobliqueの違いは、フォントによって明確でない場合があります。視覚的に大きな違いがない場合もあります。- 過剰なイタリック体や斜体の使用は、テキストの可読性を低下させる可能性があります。重要な部分にのみ使用することが推奨されます。
参考資料
よくある質問
Q1. font-style: italic; と <i> タグの違いは何ですか？
A1. <i> タグは、テキストを意味的にイタリック体としてマークアップします。一方、font-style: italic; は、テキストの見た目をイタリック体に変更します。意味的に適切な方を使用することが推奨されます。
Q2. すべてのフォントにイタリック体と斜体の両方が用意されていますか？
A2. いいえ、すべてのフォントに両方が用意されているわけではありません。フォントによっては、イタリック体のみ、斜体のみ、またはどちらも用意されていない場合があります。
Q3. font-style プロパティを他のフォントプロパティと組み合わせることはできますか？
A3. はい、font-style プロパティは、font-family や font-size などの他のフォントプロパティと組み合わせて使用することができます。これにより、テキストの外観をより細かく制御することができます。