CSSで文字の色を変えて、文字のサイズを変更して、文字の位置を指定した。
WordやExcelでフォントの種類を変えるみたいに、ホームページで文字の種類を変えたいときはどうしたらいいんだろう？これもCSSでできるのかな？と考えたかもしれません。そのとおり、CSSでできるんです。
今回は、CSSで文字の種類（フォント）を変えるfont-familyプロパティについて解説します。
そもそもフォントって何ですか？
「フォント」という言葉は当たり前に使われていて、いまさらそれが何なのか聞けないなと思っていませんか？改めて考えると、文字のこと？文字の種類のこと？よくわからないかもしれません。
フォントとは、fontと書き、本来の意味は「書体」のことです。
フォントにはたくさんの種類があります。WordやExcelで「メイリオ」や「游ゴシック」という選択肢を見たことがあると思います。選んだフォントによって、文字の見た目が変わります。
CSSで「フォント〇〇」と出てきたとき、たとえば「font-size」「font-color」の「font」は、書体と考えても大丈夫ですが、「文字」に置き換えると意味がわかりやすくなります。フォントの色を変える＝文字の色を変える、と考えるとわかりやすいです。
文字の種類を変えるfont-familyプロパティ
CSSで文字の種類を変えるには、font-family（フォントファミリー）プロパティを使います。
文字の種類を変更したい場所をセレクターで指定し、値の部分で文字の種類を指定します。
上記のCSSは、「h1の部分の、文字の種類を、メイリオもしくはsans-serifに変える」という意味があります。
フォントの指定方法
font-familyプロパティは、複数のフォントの種類を指定することができます。複数のフォントの種類を指定するときは、カンマ（,）で区切ります。
font-familyプロパティで複数のフォントを指定したときは、前に書いたフォントの方が優先されます。ホームページを見ている人の環境に指定したフォントが入っていない場合には、2番目のフォント、3番目のフォントと順番に探すようになっています。
値は、フォントの正式名称か、総称フォント名で指定します。上記の値の場合は、フォントの正式名称で指定しているのが「メイリオ」の部分で、総称フォント名が「sans-serif」の部分です。
フォントの正式名称で指定するときは、ダブルクォーテーション（”）かシングルクォーテーション（’）で囲みます。今回はダブルクォーテーションで囲んでいます。
総称フォント名で指定するときは、引用符を使いません。
フォントの正式名称について
Windows、MacなどのOSは、それぞれ最初からインストールされているフォントに違いがあります。なので、font-familyプロパティでは、windows用とmac用それぞれのフォントを指定しておくことをおすすめします。
たとえばWindows用には「游ゴシック」、Mac用には「ヒラギノ角ゴ ProN」という指定です。このとき、フォントの正式名称で半角スペースの位置や英字の大文字・小文字を間違えると認識されないので注意が必要です。正しい表記に気をつけましょう。
また、英語部分に欧文フォント、日本語部分に日本語フォントを表示したい場合は、先に欧文フォントの名称を値に記入するようにしましょう。先に日本語フォントを書いてしまうと、すべてのテキストが日本語フォントを優先的に指定した状態になってしまいます。
総称フォントについて
Windows用、Mac用それぞれにfont-familyプロパティでフォントを指定したあと、指定した正式名称の固有フォントがひとつも認識されなかったときの対策として、値の最後に総称フォントの指定を追加しておくことが推奨されます。
総称フォントの種類には主に5種類あります。
| 総称フォント名 | 説明 |
|---|---|
| serif | 明朝体 |
| sans-serif | ゴシック体 |
| cursive | 筆記体 |
| fantasy | 装飾系フォント |
| monospace | 等幅フォント |
総称フォントを指定した場合は、それぞれのOSやブラウザで初期設定されているフォントが自動的に割り当てられます。
font-familyを実際に使ってみる
まず基本のHTMLを準備します。
【HTML記述例】
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSで文字の種類を変える</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>文字の種類、fontを、英語はArialにする日本語は游ゴシックかヒラギノ角ゴシックにする、全部なければsans-serifにする</p>
</body>
</html>
では、CSSも準備しましょう。
【CSS記述例】
p{
font-family: "Arial","游ゴシック","ヒラギノ角ゴ ProN",sans-serif;
}
ブラウザで、この画像のようにゴシック体で文字が表示されていたら大成功です！
まとめ
今回は、CSSで文字の種類、フォントを変えるときに使うfont-familyプロパティの使い方について説明しました。
CSSで文字の色を変える方法、文字のサイズを変える方法、文字の位置を変更する方法については別の記事で説明していますので、ぜひ参考にしてみてください。
CSSで文字にいろいろな指定を加えることができるようになってきましたね。これからも少しずつ新しいCSSを覚えて、できることを増やしていきましょう！
