フォントの指定【font-family】：CSS入門
CSS入門（13）
今回は、文字フォントの指定を行います。「font-family」を使って、読み手が読みやすいフォントを設定しましょう。
お話は、次の順番で進みます。
フォントを指定する方法
1：前回までの状態
（01）
はじめに、前回までの状態を確認しておきましょう。箇条書きのリストマークに、画像を使ったところまで出来ました。
CSSコードは、次のようになります。
2：フォントとは？
（02）
そういえば、フォントと言われても、何のことやら分からない人もいらっしゃるのかしら？えーと・・・・・・文字の書体や形状のことを、フォントと言います。
例えば、有名なところで言うと、明朝体だとか、ゴシック体とかです。フォントによって、人に与える印象もずいぶん違います。
3：継承って、実はすごいのです
（03）
それでは、ちょっと試しに、変化が分かりやすいフォントを指定してみたいと思います。
<body>タグに対して、「font-family」を使って、「cursive」というフォントを指定してみましょう。
body { font-family: cursive; }
実際に書く場合は、追加書きして次のようにします。
（04）
ブラウザで表示してみてください。あなたのパソコンに「cursive」というフォントが入っていれば、次のように表示されるはずです。
どうですか？分かるでしょうか？えぇ、そうなんです。変わったフォントですよね〜・・・・・・って、そうじゃなくて。
<body>タグに、フォントを指定することで、すべての文字が「cursive」というフォントになっているのが分かるでしょうか。これ、すごくないですか？
つまり、継承されるということは、フォントを一元管理できているということなんです！（ズギューン）
すごいよ、CSS！ビバ！CSS！
ただ、フォントは大丈夫みたいですが、指定する内容によっては、うまく継承されないことがあります。（ブラウザのバグです）
4：「font-family」の特別な記述の方法
（05）
「font-family」には、特別な記述法があります。いわば、ルールみたいなことです。
次のような場合は、「""（ダブルクオーテーション）」で、フォント名を囲む必要があります。
- 日本語が入ったフォント名を記述する場合
- フォント名の中にスペースを含む場合
例えば、次のような形で書きます。覚えておきましょう。
body { font-family: "ＭＳ ゴシック"; }
一般的に、「""（ダブルクオーテーション）」を使いますが、「''（シングルクオーテーション）」で囲んでもOKです。
5：複数のフォントが指定できます
（06）
ところで、私は、ポロリと大切なことを書いていたのですが、気付いたでしょうか？いやいや、おっぱいポロリじゃなくてさ、前述（04）で、次のように書きました。
あなたのパソコンに「cursive」というフォントが入っていれば〜云々
それじゃあ、あなたのパソコンに「cursive」というフォントが入っていなかったら、どうなるのでしょうか？表示されない？
いえいえ、さすがにそこまで酷くはありません。
フォントが入っていない場合は、ユーザが、ブラウザで設定しているフォントで表示されます。（Firefoxなら、[ツール]-[オプション]-[コンテンツ]で確認できます）
（07）
さて、それでは、作り手の意図にそったデザインで表示してもらうには、どのようにしておくのが良いか？というと、複数のフォントを指定しておくことが出来るので、優先順で記述しておきます。
各フォントは、「,（カンマ）」で区切ります。例えば、次のように記述します。
つまり、この場合であれば、「ＭＳ ゴシック」を第一候補、そして「cursive」を第二候補として、表示してくださいとブラウザに指定しているわけです。
6：評判の良いフォント
CSSの書き方にもだいぶ慣れてきたと思うので、フォントの指定方法自体は、特に難しいものではなかったと思います。
それより、何より、「どんなフォントを指定しておけば良いのか？」が問題です。どのようなフォントが評判が良いのか、愛されているのか、次回の記事を、続けてご覧ください。
次回予告
次回は、「日本人が好きなフォントは？」について書いています。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/21 更新日：2008/04/21
« 「箇条書きに画像【list-style-image】」｜「日本人が好きなフォントは？」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/277-32939c0c
