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

CSSのfont-styleプロパティで、文字を斜体にするサンプルです。

目次

仕様 font-styleプロパティの仕様
サンプル font-styleのサンプル

font-styleプロパティの仕様

font-style : 値

font-styleプロパティは、文字を斜体にします。

説明
normal 通常のフォントです。(初期値)
italic イタリック体(italic)のフォントを指定します。デザインされた斜めの文字です。
oblique 斜体(oblique)のフォントを指定します。単純に文字を斜めにしたものです。
値を継承する

フォントの日本語の「メイリオ」はイタリック体(italic)や斜体(oblique)を指定しても斜めになりません

以下はMDNのfont-styleプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/font-style

font-styleのサンプル

font-styleのサンプルです。

1番上は、normalです。通常のフォントです。
2番目は、italicです。英字は斜めですが、日本語のメイリオは斜めではありません。
3番目は、italicです。英字、日本語とも斜めです。日本語はMS Pゴシックです。
4番目は、obliqueです。英字は斜めですが、日本語のメイリオは斜めではありません。
5番目は、obliqueです。英字、日本語とも斜めです。日本語はMS Pゴシックです。

コード

上記サンプルのコードです。

<style>
#p1{
	font-style:normal;
	font-family:Times New Roman,"メイリオ";
}
#p2{
	font-style:italic;
	font-family:Times New Roman,"メイリオ";
}
#p3{
	font-style:italic;
	font-family:Times New Roman,"MS Pゴシック";
}
#p4{
	font-style:oblique;
	font-family:Times New Roman,"メイリオ";
}
#p5{
	font-style:oblique;
	font-family:Times New Roman,"MS Pゴシック";
}
p{font-size:24px;}
</style>
<p id="p1">1.normal abc 通常</p>
<p id="p2">2.italic abc メイリオは斜めにならない</p>
<p id="p3">3.italic abc MS Pゴシックは斜めになる</p>
<p id="p4">4.oblique abc メイリオは斜めにならない</p>
<p id="p5">5.oblique abc MS Pゴシックは斜めになる</p>

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにするサンプル
CSS vertical-align 垂直の位置を指定するサンプル
CSS line-height 行の高さを指定するサンプル
CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow 表示幅超える/スクロール表示非表示
CSS text-decoration 文字に線を引くサンプル
CSS font-weight 文字の太さを指定する

△上に戻る