font-style（フォントスタイル）プロパティ
最終更新：2026-09-13
font-style font-style（フォントスタイル）プロパティ
font-style プロパティはテキストをイタリック体またはオブリーク体で描画するかどうかを設定します。normal、italic、oblique の 3 値を受け付け、引用や強調、特殊な組版によく使われます。
| カテゴリ | |
|---|---|
| 初期値 | normal |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | discrete |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
font-style: normal | italic | oblique <angle>?;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
normal | italic | oblique | キーワード | フォントスタイル: normal、italic、oblique |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： italic はフォント自身のイタリック字形を使いますが、oblique はグリフを機械的に傾けます。フォントにイタリック版がない場合、両者はほぼ同じように見えます。
❓ よくある質問
Qイタリック体とオブリーク体の違いは何ですか？
Aitalic はフォント専用に設計されたイタリック字形を使いますが、oblique は通常の字形を機械的に傾けて疑似イタリックの見た目を作ります。フォントにイタリック版がない場合、ブラウザーは italic の代わりに oblique を使うため、両者は似た見た目になります。CSS では角度も指定できます（例: oblique 10deg）。
QCSS の font-style プロパティでテキストをイタリックにするにはどうすればよいですか？
Afont-style: italic（見た目がきれいで推奨）または font-style: oblique（強制的な傾斜）を設定します。書名や外国語の単語、強調によく使われます。em 要素と i 要素は既定でイタリックになる点に注意してください。イタリックを消すには font-style: normal を使います。
Qfont-style: italic と transform: skew の違いは何ですか？
Afont-style は、イタリック字形を選択するか軽く傾ける組版設定で、要素のボックスには影響しません。transform: skew() は背景やボーダーを含む要素全体を幾何学的に歪めます。通常のイタリックには font-style を使い、代用として skew は避けてください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
