font-family(CSSフォント・テキスト)

  • Updated on 2014.04.03
適用要素:すべての要素

font-familyプロパティは、フォントの種類を指定します。
指定したフォントで表示できない場合に備え、カンマ( , )で区切って複数の候補を指定することができます。

フォントファミリー名で指定

フォント名で指定する方法です。(日本語やスペースが含まれるフォントファミリー名は引用符で囲みます。) Safariは日本語を使ったフォントファミリー名は認識しません。 逆にFirefoxでは日本語フォントのアルファベット表記は適用されないので、日本語で指定する必要があります。


Windows
"MS UI Gothic"
"MS Pゴシック","MS PGothic"
"MS ゴシック","MS Gothic"
"MS P明朝","MS PMincho"
"MS 明朝","MS Mincho"
"メイリオ",Meiryo"
Mac
"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"
"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN"
"ヒラギノ角ゴ Pro W6","HiraKakuPro-W6"
"ヒラギノ角ゴ ProN W6","HiraKakuProN-W6"
"ヒラギノ角ゴ Std W8","Hiragino Kaku Gothic Std"
"ヒラギノ角ゴ StdN W8","Hiragino Kaku Gothic StdN"
"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro"
"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN"
"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro"
"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN"
"ヒラギノ明朝 Pro W6","HiraMinPro-W6"
"ヒラギノ明朝 ProN W6","HiraMinProN-W6"
"Osaka"
"Osaka-等幅","Osaka-Mono"
総称ファミリ名で指定

ゴシック体系や明朝体系など種類で指定する方法です。 総称ファミリ名はフォントファミリー名で指定したフォントが使えなかった場合にそなえ、値の最後に総称ファミリー名を指定することを推奨しています。 ゴシック体系や明朝体系など種類で指定する方法です。また、総称ファミリー名は引用符で囲いません。

sans-serif(ゴシック体系)
serif(明朝体系)
monospace(等幅系)
cursive(筆記体系)
fantasy(装飾系)
HTML
<p>このテキストのフォントには明朝体が指定されています。</p>
<div>このテキストのフォントにはゴシック体が指定されています。</div>
CSS
p {
	font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
}
div {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}
サンプルデモ

このテキストのフォントには明朝体が指定されています。

このテキストのフォントにはゴシック体が指定されています。