サイト制作に関するメモ書き

HOME > HTML・CSS > font-familyの指定方法

font-familyの指定方法

font-familyの指定を古い案件から使いまわしたりすることが多いので、自分用に調べてみたことをメモ。

基本セット

特に指定のない場合に使うゴシックのセットで、Windowsはメイリオ、Macはヒラギノの想定です。

CSS

body {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

基本セットのゴシックのデモページ

明朝の場合はWindowsはHG明朝E、Macはヒラギノです。

CSS

body {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}

基本セットの明朝のデモページ
 

游書体

游書体の指定がたまにあるので、游ゴシックをベースにしたセットです。
游書体はWindowsとMacで微妙に表記が違うらしいので4つ記述しています。

CSS

body {
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

游ゴシックのデモページ

游明朝のセットです。

CSS

body {
	font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}

游明朝のデモページ
 

スマホ向け

スマホ用サイトを作るときのセットです。
RobotoとDroid SansはAndroid用で、iOSはヒラギノを指定していますが、ProではなくProNしか入っていないようなので注意が必要です。

CSS

body {
	font-family: Verdana, Roboto, "Droid Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

スマホ向けのデモページ
 

PC・スマート向け

PC向けとスマホ向けをごちゃまぜにしたセットです。

CSS

body {
	font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

PC・スマート向けのデモページ
 

省略出来たりもっと良い指定方法があるかもですが、とりあえず自分用に調べたことのまとめでした。

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP