CSS プロパティ font-style

CSS font-style プロパティ：テキストの書体を制御する

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; }