CSS font-style 文字を斜体にするサンプル

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

目次 font-styleとは
normal 斜めにならない
italic 英字と日本語(メイリオ) / italic 英字と日本語(MS Pゴシック)
oblique 英字と日本語(メイリオ) / oblique 英字と日本語(MS Pゴシック)

font-styleとは

書き方 font-style : 値
normal
通常のフォントです。
italic
イタリック体(italic)のフォントでデザインされた斜めの文字です。
日本語(MS Pゴシック)も斜めになります。
ただし、日本語(メイリオ)は斜めになりません。
oblique
斜体(oblique)のフォントを指定します。単純に文字を斜めにしたものです。
日本語(MS Pゴシック)も斜めになります。
ただし、日本語(メイリオ)は斜めになりません。
初期値 normal
継承 継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/font-style

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 英字、日本語(MS Pゴシック)は斜めになる

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

italicです。英字、日本語とも斜めです。日本語はMS Pゴシックです。

 

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

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

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

 

oblique 英字、日本語(MS Pゴシック)は斜めになる

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

obliqueです。英字、日本語とも斜めです。日本語はMS Pゴシックです。

関連の記事

CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS text-decoration 文字に線を引くサンプル
CSS font-weight 文字の太さを指定する

△上に戻る