font-style 一覧

font-style 一覧：指定されたフォントファミリー内のスタイルを選択

概要

このページでは、CSSのfont-styleプロパティについて解説します。font-styleプロパティは、指定されたフォントファミリー内で、ノーマル（roman）、イタリック、または斜体のいずれかのフォントスタイルを選択するために使用されます。

プロパティ値

font-styleプロパティには、以下の値を設定できます。

値 説明
normal
  • テキストを通常のスタイルで表示します。
  • 多くのフォントでは、これはローマン体として表示されます。
  • これは `font-style` のデフォルト値です。
italic
  • テキストをイタリック体で表示します。
  • イタリック体は、通常、ローマン体よりも筆記体に近い形で、右に傾斜しています。
  • `font-family` で指定されたフォントに真のイタリック体が含まれていない場合、ブラウザは斜体を使用します。
oblique
  • テキストを斜体で表示します。
  • 斜体は、通常、ローマン体を人工的に傾斜させたものです。
  • `font-family` で指定されたフォントに斜体が含まれていない場合、ブラウザは独自の斜体バージョンを作成します。
oblique
  • テキストを指定した角度で斜体で表示します。
  • は、 deg (度) 単位で指定します。
inherit
  • 親要素から `font-style` の値を継承します。

使用例

以下は、font-styleプロパティの使用例です。


<p>このテキストはノーマル体です。</p>

<h1>このテキストはイタリック体です。</h1>

<p class="oblique-text">このテキストは斜体です。</p>

<p class="oblique-angle">このテキストは20度傾斜した斜体です。</p>

<style>
p {
  font-style: normal;
}

h1 {
  font-style: italic;
}

.oblique-text {
  font-style: oblique;
}

.oblique-angle {
  font-style: oblique 20deg;
}
</style>

注意事項

  • font-style: oblique は、すべてのブラウザでサポートされているわけではありません。サポートされていないブラウザでは、 font-style: italic と同じように表示されます。
  • font-style: oblique <angle> は、一部のブラウザでのみサポートされています。

まとめ

font-styleプロパティを使用すると、テキストのスタイルを簡単に変更できます。適切なフォントスタイルを選択することで、テキストの読みやすさやデザイン性を向上させることができます。

関連QA

  1. Q: font-style: italic と font-style: oblique の違いは何ですか？
    A: イタリック体は、通常、ローマン体よりも筆記体に近い形で、右に傾斜しています。一方、斜体は、通常、ローマン体を人工的に傾斜させたものです。
  2. Q: すべてのフォントにイタリック体と斜体の両方が含まれていますか？
    A: いいえ、すべてのフォントにイタリック体と斜体の両方が含まれているわけではありません。フォントにイタリック体が含まれていない場合、ブラウザは斜体を使用します。フォントに斜体が含まれていない場合、ブラウザは独自の斜体バージョンを作成します。
  3. Q: `font-style`プロパティはどのように継承されますか？
    A: `font-style`プロパティは、親要素から子要素に継承されます。ただし、子要素で`font-style`プロパティの値が明示的に設定されている場合は、その値が優先されます。

その他の参考記事:CSS テキストスタイル