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