【CSSリファレンス】font-family

こんにちは（・∀・）

CSSプロパティをご紹介します。今回ご紹介するCSSプロパティはfont-familyです。

概要

font-familyプロパティを使用してフォントの種類を指定します。指定したフォントで表示できない場合に備え、カンマ( , )で区切って複数の候補を指定することができます。その場合、指定した順に利用可能なものが選択されますが、その候補の中にも使用できるフォントがない場合はデフォルトのフォントで表示されます。

.sample {
  font-family: "ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;
}

適用要素

すべての要素

指定できる値

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

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

Windows向けフォント

"游ゴシック Medium","Yu Gothic Medium"
"游明朝",'Yu Mincho'
"ＭＳ Ｐゴシック","MS PGothic"
"メイリオ",Meiryo

Mac向けフォント

"游ゴシック体",YuGothic
"游明朝体",YuMincho
"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"
Osaka

総称ファミリ名で指定

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

sans-serif(ゴシック体系)
serif(明朝体系)
monospace(等幅系)
cursive(筆記体系)
fantasy(装飾系)

サンプル

HTML

<p class="demo1">このテキストのフォントには明朝体が指定されています。</p>
<p class="demo2">このテキストのフォントにはゴシック体が指定されています。</p>

CSS

.demo1 {
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
}
.demo2 {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

Result

関連リンク

【決定版】フォントの設定はこれで決まり！