CSS font-style 文字を斜体にする

01. font-style

・font-styleとは

02. 使用例

・normal 斜めにならない

・italic 英字は斜めになる、日本語(メイリオ)は斜めにならない

・italic 英字、日本語(ＭＳＰゴシック)は斜めになる

・oblique 英字は斜めになる、日本語(メイリオ)は斜めにならない

・oblique 英字、日本語(ＭＳＰゴシック)は斜めになる

・継承で文字を斜体にする

font-styleとは

font-styleは、文字を斜体にします。

font-style : 値

値は以下を設定します。継承します。

normal	通常のフォントです。デフォルト。
italic	イタリック体(italic)のフォントでデザインされた斜めの文字です。日本語(ＭＳＰゴシック)も斜めになります。ただし、日本語(メイリオ)は斜めになりません。メイリオには斜体のフォントが用意されていないためです。
oblique	斜体(oblique)のフォントを指定します。単純に文字を斜めにしたものです。日本語(ＭＳＰゴシック)も斜めになります。ただし、日本語(メイリオ)は斜めになりません。メイリオには斜体のフォントが用意されていないためです。

normal 斜めにならない

<style>
  .p1 {
    font-size: 24px;
    font-style: normal;
    font-family: Times New Roman, "メイリオ";
  }
</style>
<p class="p1">1.normal abc　通常</p>

font-styleの値は、normalです。

italic 英字は斜めになる、日本語(メイリオ)は斜めにならない

<style>
  .p1 {
    font-size: 24px;
    font-style: italic;
    font-family: Times New Roman, "メイリオ";
  }
</style>
<p class="p1">2.italic abc　メイリオは斜めにならない</p>

italicです。英字は斜めですが、日本語のメイリオは斜めになりません。

italic 英字、日本語(ＭＳＰゴシック)は斜めになる

<style>
  .p1 {
    font-size: 24px;
    font-style: italic;
    font-family: Times New Roman, "ＭＳ Ｐゴシック";
  }
</style>
<p class="p1">3.italic abc　ＭＳ Ｐゴシックは斜めになる</p>

italicです。英字、日本語とも斜めです。日本語はＭＳＰゴシックです。

oblique 英字は斜めになる、日本語(メイリオ)は斜めにならない

<style>
  .p1 {
    font-size: 24px;
    font-style: oblique;
    font-family: Times New Roman, "メイリオ";
  }
</style>
<p class="p1">4.oblique abc メイリオは斜めにならない</p>

obliqueです。英字は斜めですが、日本語のメイリオは斜めになりません。

oblique 英字、日本語(ＭＳＰゴシック)は斜めになる

<style>
  .p1 {
    font-size: 24px;
    font-style: oblique;
    font-family: Times New Roman, "ＭＳ Ｐゴシック";
  }
</style>
<p class="p1">5.oblique abc ＭＳ Ｐゴシックは斜めになる</p>

obliqueです。英字、日本語とも斜めです。日本語はＭＳＰゴシックです。

継承で文字を斜体にする

<style>
  .div1 {
    font-style: italic;
  }
</style>
<div class="div1">
  <p>abcde</p>
  <p>abcde</p>
  <p>abcde</p>
</div>

クラスのdiv1はfont-style: italicにしています。継承で子要素にも反映されます。

以下のイメージになります。