目次
01. font-style
02. 使用例
・italic 英字は斜めになる、日本語(メイリオ)は斜めにならない
・italic 英字、日本語(MS Pゴシック)は斜めになる
・oblique 英字は斜めになる、日本語(メイリオ)は斜めにならない
font-styleとは
font-styleは、文字を斜体にします。
font-style : 値 |
値は以下を設定します。継承します。
normal | 通常のフォントです。デフォルト。 |
italic | イタリック体(italic)のフォントでデザインされた斜めの文字です。 日本語(MS Pゴシック)も斜めになります。 ただし、日本語(メイリオ)は斜めになりません。メイリオには斜体のフォントが用意されていないためです。 |
oblique | 斜体(oblique)のフォントを指定します。単純に文字を斜めにしたものです。 日本語(MS Pゴシック)も斜めになります。 ただし、日本語(メイリオ)は斜めになりません。メイリオには斜体のフォントが用意されていないためです。 |
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ゴシックです。
継承で文字を斜体にする
<style>
.div1 {
font-style: italic;
}
</style>
<div class="div1">
<p>abcde</p>
<p>abcde</p>
<p>abcde</p>
</div>
クラスのdiv1はfont-style: italicにしています。継承で子要素にも反映されます。
以下のイメージになります。
関連の記事