HTMLやCSSを記述する際には必ず、「フォント」についてしっかりと考えなければなりません。
今、あなた自身がWebページを閲覧しているものは「ブラウザ」と呼ばれるソフトを使っているからなのです。 使っているブラウザには人それぞれ種類があり(Internet ExplorerやFirefox、Google Chrome、Operaなどが有名)、「それぞれのブラウザによっては、表示できないフォント」もある、ということを考えながらWebページを作成していかなければなりません。
ここではfont-familyプロパティについて、しっかりと考えていきましょう。 font-familyでは、フォントの種類を設定することができます。
ここではテストのためにまず、HTML上に何かの文字を入力しましょう。
<p>あいうえお</p> <p>ABCDE</p> <p>壱弐参四伍</p>
次にcss上に
p { font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }
と入力します。 すると、今回使用したGoogle Chromeでは
このようになります。 これは、「ＭＳ Ｐ明朝」が表示されています。
font-familyプロパティでは、いくつものフォントを指定することができます。それは最初に述べたとおり、「ブラウザによって表示されないフォントがある」ことを想定して、3つほどのフォントを指定しておくのが一般的です。 優先順位の高い順に記述をしていきます。適用できるものを見つけたら、そのフォントが適用されます。
有名なサイトではどのようなfont-familyの指定になっているのでしょうか。 今回は、http://www.6666666.jp/design/20140428/さんに参考にさせていただきました。
Yahoo!JAPAN
font-family: 'MS PGothic', Osaka, Arial, sans-serif;
Google
font-family: arial, sans-serif;
FC2
font-family: Verdana, Arial, Helvetica, sans-serif;
Microsoft
font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;
Amazon
font-family: Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif;
Wikipedia
font-family: sans-serif;
goo
font-family: Osaka, Arial, Helvetica, sans-serif;
ameba
font-family: 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', Arial, Helvetica;
となっています。
最後にfont-familyで指定したものが、何も適応できなかった場合について考えてみましょう。 その場合は「ブラウザのデフォルト(もともと)に用意されたフォントが適用される」という事になります。その場合は、さまざまなブラウザで異なるフォントが表示されることもあります。
一般的なブラウザでの、デフォルトのフォントは以下のとおりです。
| Safari 7 | Mac 10.9 では「Helvetica か ヒラギノ角ゴシック ProN」 |
| Firefox 25 | Mac 10.9 では「ヒラギノ角ゴシック ProN」 |
| Chrome 30 | Mac 10.9では「ヒラギノ角ゴシック ProN」 |
| IE 11 | Win 8.1では「メイリオ」 |
| IE 8 | Win 7 では「Arial / ＭＳ Ｐゴシック」 |
| Firefox 25 | Win 8.1では「ＭＳ Ｐゴシック」 |
| Chrome 30 | Win 8.1では「ＭＳ Ｐゴシック」 |
このことに注意して、まずは「font-familyを複数指定する」ことが重要になってきますね。
