フォント（文字）の種類を変えるには、プロパティにfont-familyを指定します。
font-family:指定するフォント1,フォントの種類;
}
例えば、フォントをＭＳ Ｐ明朝に変更したい場合は以下のように記述します。
【CSSの記述例】font-family:"ＭＳ Ｐ明朝", serif;
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>フォントの種類を変える</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p class="font">テキストテキストテキストテキスト</p>
</body>
</html>
【ブラウザでの表示】
ここで注意しなければならないのが、「フォントは””で囲む」ことと「最後にフォントの種類を指定する」ことです。
フォントを指定する際には、必ず”と”でフォントを囲み、スペースやスペル、全角・半角などの表記を正確に入力する必要があります。
また、最後にフォントの種類を入力します。
なお、フォントを指定する際には数種類、予備候補フォントを指定しておくことをオススメします。
予備候補フォントとは
font-family:"ＭＳ Ｐ明朝", "ヒラギノ明朝 Pro W3", serif;
}
例えば指定したフォントが自分のパソコンにインストールされていても、他の人のパソコンにはインストールされていない可能性もあります。
このような場合、フォントがインストールされていないパソコンでは正常に表示することが出来ません。
そこで、指定したフォントが無い場合、候補２、候補３のフォントを準備しておきます。
これで、仮に指定したフォントがインストールされていないパソコンでホームページを表示した場合でも、他の候補フォントが自動的に選択され、指定したイメージを大幅に崩すことなく表示することができます。
なお、どの候補フォントもインストールされていない場合、ブラウザ標準のフォントで表示されます。
フォントの種類と分類
フォントの種類は、大まかに以下の5つに分類されます。
| 種類 | 分類 | 系列のフォント |
| serif | 明朝系 | MS明朝、MS P明朝、Garamond、MS Georgia、Times New Romanなど |
| sans-serif | ゴシック系 | MSゴシック、中ゴシック、Arialなど |
| cursive | 筆記体・続け文字 | caflisch script、ex pontoなど |
| fantasy | 装飾体 | critter、studzなど |
| monospace | 等幅フォント | Osaka-等幅、courier、Courier Newなど |
※日本語テキストにcursiveを指定していると、希に正常に表示できない場合があります。
覚えておきたいポイント
一括変更の方法
ホームページ全体のフォントを一括で変更するには、bodyにfont-familyを指定するとOKです。
[記述例]body{
font-family:指定するフォント
}
