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のサンプルのコードです。
3行目はフォントファミリー名のメイリオを使用しています。
それ以下の行は、それぞれ総称フォントファミリー名を使用しています。

<style>
#box1{
	font-family:"メイリオ",serif,sans-serif;
}
#box2{
	font-family:serif,sans-serif,monospace;
}
#box3{
	font-family:sans-serif,monospace;
}
#box4{
	font-family:monospace,cursive,fantasy;
}
#box5{
	font-family:cursive;
}
#box6{
	font-family:fantasy;
}
#box{font-size:24px;}
</style>
<body >
<div id="box">
<div id="box1">あいうえお-メイリオ</div>
<div id="box2">かきくけこ-serif-明朝系</div>
<div id="box3">さしすせそ-sans-serif-ゴシック系</div>
<div id="box4">たちつてと-monospace-等幅</div>
<div id="box5">なにぬねの-cursive-筆記体・草書体</div>
<div id="box6">はひふへほ-fantasy-装飾</div>
</div>
</body>

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

あいうえお-メイリオ

かきくけこ-serif-明朝系

さしすせそ-sans-serif-ゴシック系

たちつてと-monospace-等幅

なにぬねの-cursive-筆記体・草書体

はひふへほ-fantasy-装飾