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

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

font-family プロパティ

font-family : 値1 , 値2

値1 : フォントファミリー名
値1	説明
メイリオなど	種類はたくさんあります。
複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。名称にスペースがある場合はダブルコーテーションまたはシングルコーテーションで囲みます。例："ＭＳＰゴシック"

値2 : 総称フォントファミリー名
値2	説明
serif	明朝系に相当します。
sans-serif	ゴシック系に相当します。
monospace	等幅のフォントです。
cursive	筆記体・草書体に相当します。
fantasy	装飾されたフォントです。
総称フォントファミリー名は、フォントファミリー名が使用できない時に使用されるフォントです。最低１つは指定しておいたほうが良いです。複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。
値を継承する

初期値はブラウザによります。
優先順位の高いフォントから順に見ていきユーザーの環境に指定のフォントがあればそれが使用されます。
以下は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>