CSSの明朝体とゴシック体【現役エンジニアが解説】
今回は、CSSの明朝体とゴシック体について、それぞれに分け、簡単に解説していきます。
明朝体
明朝体は線が細く、可読性に優れたフォントです。
例えば、游明朝やヒラギノ明朝、MS 明朝(MS P明朝)等があります。
body{ font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; }
上記のコードでは、body要素でWindowsやApple等の明朝体のフォントを指定しています。
ゴシック体
ゴシック体はインパクトがあり、見出し等に使われるフォントです。
例えば、メイリオやヒラギノ、MS ゴシック(MS Pゴシック)等があります。
body{ font-family:"メイリオ", Meiryo, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "MS Pゴシック", "MS ゴシック", "MS PGothic", sans-serif; }
上記のコードでは、body要素のフォントとしてWindowsやApple等のゴシック体を指定しています。
プロポーショナルフォント
Pの付くフォントはプロポーショナルフォントと呼ばれるフォントです。
Pの付くフォントは文字ごとに間隔が異なり、Pの付いていないフォントは等幅となっています。
.hoge{ font-family:"MS 明朝"; } .hoge-p{ font-family:"MS P明朝"; }
上記のコードでは、hogeのクラスの要素に等幅のMS 明朝を、hoge-pというクラスの要素に等幅ではないMS P明朝をフォントに指定しています。