フォントの種類を指定する
フォントの種類を設定します。指定したフォントがユーザーの環境にインストールされているとは限りませんので、優先して表示させたい順に複数のフォントをカンマ（,）で区切って指定できます。
指定できる値
フォント名
フォント名（フォントファミリー名）を直接指定できます。フォント名にスペースが含まれている場合は、フォント名の前後を二重引用符（”）または一重引用符（’）で囲ってください。また、フォント名を指定する時には、全角・半角・大文字・小文字などの違いに注意してください。
serif, sans-selif, cursice, fantasy, monospace
フォントの一般分類名を表すキーワードで指定することができます。これらの名前はキーワードですので、引用符で囲まないでください。通常は、指定したフォントが利用できない環境向けの最終的な大体フォントとして、一番最後に指定しておきます。
serif 明朝系のフォント sans-serif ゴシック系のフォント cursive 草書体・筆記体系のフォント fantasy 装飾的なフォント monoscope 等幅のフォント
CSSソース
@charset "shift_jis";
p {
margin: 0;
font-size: 3em
}
.c1 { font-family: "ＭＳ 明朝",平成明朝,serif }
.c2 { font-family: "ＭＳ ゴシック",Osaka,sans-serif }
.c3 { font-family: ＤＦ行書体,HG行書体,cursive }
.c4 { font-family: HG創英角ﾎﾟｯﾌﾟ体,fantasy }HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フォント名での指定例</title>
<link href="../assets/style_sheets/03-01.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="c1">明朝体</p>
<p class="c2">ゴシック体</p>
<p class="c3">行書体</p>
<p class="c4">角ポップ体</p>
</body>
</html> </head>
<body>
<h1>First letter</h1>
</body>
</html>
CSSソース
p {
margin: 0;
font-size: 3em
}
.c1 { font-family: serif }
.c2 { font-family: sans-serif }
.c3 { font-family: cursive }
.c4 { font-family: fantasy }
.c5 { font-family: monospace }HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>一般分類名での指定例</title>
<link href="../assets/style_sheets/03-02.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="c1">明朝系</p>
<p class="c2">ゴシック系</p>
<p class="c3">草書体系</p>
<p class="c4">装飾系</p>
<p class="c5">等幅フォント</p>
</body>
</html>
CSSソース@charset "shift_jis";
select, input, textarea {
font-family: HG創英角ﾎﾟｯﾌﾟ体,fantasy
}
textarea { margin-top: 1em }HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フォームへの適用例</title>
<link href="../assets/style_sheets/03-03.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="">
<p>
<select>
<option>select要素</option>
<option>選択肢２</option>
</select>
</p>
<p>
<input type="text" value="input要素">
<br>
<textarea rows="3" cols="20">
textarea要素
</textarea>
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
</body>
</html>
