CSS フォントを指定するサンプル(font-family)

CSSのフォントを指定するサンプルです。
font-familyプロパティを使用します。

font-family プロパティ

font-family : 値1 , 値2
値1 : フォントファミリー名
値1 説明
メイリオなど 種類はたくさんあります。
複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。
名称にスペースがある場合はダブルコーテーションまたはシングルコーテーションで囲みます。例:"MS Pゴシック"
値2 : 総称フォントファミリー名
値2 説明
serif 明朝系に相当します。
sans-serif ゴシック系に相当します。
monospace 等幅のフォントです。
cursive 筆記体・草書体に相当します。
fantasy 装飾されたフォントです。
総称フォントファミリー名は、フォントファミリー名が使用できない時に使用されるフォントです。最低1つは指定しておいたほうが良いです。
複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。
値を継承する
  • 初期値はブラウザによります。
  • 優先順位の高いフォントから順に見ていきユーザーの環境に指定のフォントがあればそれが使用されます。
  • 以下はMDNのfont-familyプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/font-family

サンプル

font-familyのサンプルです。

1番上は、メイリオです。
2番目は、serifです。明朝系に相当します。
3番目は、sans-serifです。ゴシック系に相当します。
4番目は、monospaceです。等幅のフォントです。
5番目は、cursiveです。筆記体・草書体に相当します。
6番目は、fantasyです。装飾されたフォントです。

コード

上記サンプルのコードです。

<style>
#p1{
	font-family:"メイリオ",serif,sans-serif;
}
#p2{
	font-family:serif,sans-serif,monospace;
}
#p3{
	font-family:sans-serif,monospace;
}
#p4{
	font-family:monospace,cursive,fantasy;
}
#p5{
	font-family:cursive;
}
#p6{
	font-family:fantasy;
}
p{font-size:24px;}
</style>

<p id="p1">あいうえお-メイリオ</p>
<p id="p2">かきくけこ-serif-明朝系</p>
<p id="p3">さしすせそ-sans-serif-ゴシック系</p>
<p id="p4">たちつてと-monospace-等幅</p>
<p id="p5">なにぬねの-cursive-筆記体・草書体</p>
<p id="p6">はひふへほ-fantasy-装飾</p>

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)

△上に戻る