要素内に表示するフォントを指定する
Last update: 2008-08-18
指定できるのは全ての要素。対象となる要素内に表示するフォントを、font-family 値の「フォント名」または「ファミリ名」で指定する。
記述は、表示させたい優先フォントを左から順にフォンとファミリ名で指定し、名前同士の間を [, ] で区切る。最後にはフォンとファミリの種類を表すキーワードを指定する。これはユーザ環境に候補が無い場合の最終選択となるので、書き加えることが望ましいとされている。指定できるキーワードは：
- serif (明朝系)
- sans-serif (ゴシック系)
- cursive (草書体)
- faantasy (装飾書体)
- monospace (等幅)
これはわざわざテストする必要もないが、困ったことに UA によってバグがあるので、クロスブラウザを目指した HTML で font-family で特定のフォントを指定する場合は注意が必要だ。
Mac OS X 標準のヒラギノ角ゴシックを例にすると、Firefox では "Hiragino Kaku Gothic Pro" で指定すると無視されるというのがあったのだが、Firefox 3 は解消していて、"Hiragino Kaku Gothic Pro" または "ヒラギノ角ゴ Pro" どちらの表記でも表示できるようになっている。
Safari は "ヒラギノ角ゴ Pro" では無視され、Opera は "Hiragino Kaku Gothic Pro" を無視する。というわけで、ヒラギノ角ゴシックを指定する場合は両方を併記しないといけない現状に変わりはない。
font-family でのバグについては Web で検索すると情報が得られるので、知らないという方は検索してみて欲しい。
font-family 指定でのレンダリング
ここでは書体サンプルではなく、記述の仕方でブラウザによってどう変わるのかを実験してみる。
基準は Minefield 3.1a2pre (Firefox 3.1 alpha 2 英語版) とするが、Minefield が正しくレンダリングしているということではなく、あくまでも比較のための基準ということで。
レンダリングテスト HTML では、body には font-family を指定していないので全体を支配するのはユーザのブラウザでのフォント指定。HTML 内では各 dd 要素にフォントを指定、候補が無かった場合は serif 系フォントで表示する。下がそのサンプル。
- 下の dd 要素に font-family を指定する
- あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら
サンプルページはこちら：font-familyのテスト
ヒラギノ角ゴシック
まずは Mac OS X 標準のヒラギノ角ゴシック。これは上でも書いたように、記述の仕方によってブラウザは認識を変えてしまう。ホントに困ったものだ。そんな中で Firefox 3 はどう記述しても認識するようになってくれたようだ。えらいぞ Mozilla！
"Hiragino Kaku Gothic Pro" と指定した場合
Minefield と Safari 3.1.2 は正しく認識しているが Firefox 2.x と Oper 9.5.1 は認識しない。
"ヒラギノ角ゴ Pro" と指定した場合
Minefield, Firefox 2.x, Opera 9.5.1 は認識しているが Safari 3.2.1 は認識しない。
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro" と併記指定した場合
サンプル画像はアップしないが、この記述なら Minefield, Firefox 2.x, Safari 3.2.1, Opera 9.5.1 の全てでヒラギノ角ゴシックで表示される。
font 名で指定する場合は、日本語表記と英語表記を合わせて指定しなければ問題が起きるということが分かった。
メイリオ
Windows XP SP2 のほうも観てみよう。ただし、こちらは Firefox 2.x と IE は省いて Safari 3.2.1 と Opera 9.5.1 との比較。それと Vista は分からない。理由は単純に環境を作っていないだけなのであしからず。
"メイリオ" と指定した場合
Minefield, Safari, Opera とも正しく認識している。Opera のフォントサイズが大きいが、これはシステムのブラウザフォントサイズに合わせるためでしょうか?
それにしても Safari のレンダリングは、フォントが若干太ってフォントスペースが狭いが、他のブラウザを上回ってきれいだ。
"Meiryo" と指定した場合
Minefield は認識しているが、Safari と Opera の結果は異なる。Opera は CSS に従って最終候補の明朝でレンダリングしているが Safari はなんだろう？。Osaka のように見えるのだが、内部に Osaka を含有しているのだろうか？？その辺りの真偽は置いとくとしても、候補フォントがない場合は serif で表示と設定しているのだが、Safari は sans-serif で表示しているところがよく分からない。
"メイリオ", "Meiryo" と併記した場合
れもサンプル画像はアップしないが、結果は３つのブラウザで同じ。
気になって(笑) IE 6 でも確認してみたが、Minefield と同じ結果だった。
Windows 環境では
Windows 向けでは "メイリオ" の指定で良いのかもしれないが、Vista でも同じ結果なのかは環境がないために分からない。さらに、私の環境に無い IE 7 や少しは期待している IE 8 ではどうなるのか分からない。併記することで回避できるバグが存在するのなら、記述しておいた方が良いのかもしれない。
font-family 指定に思うこと
私は日本語のサイトを作る際にはfont-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;というような定番の記述をしてきた。まぁ、この書き方で平均点だろうということで使っていた。もちろん、お仕事ではハックを使ったりする必要もあるわけだが。
ちなみに、このフォント指定の順番にも IE にバグがあったりする。
記述の順番については、Windows にメイリオが加わったので、今後は利用する環境が多くなるだろうということから、最初にメイリオを指定。次ぎに Mac OS X のヒラギノ、MS P ゴシックが最後になっているが、これは Mac 環境で Office をインストールしているユーザへの配慮からだ。こうしないと当該環境では MS P ゴシックが優先フォントになってしまい、かなり寂しい思いをする。
このサイトもスタート当初はそんな記述をしていたのだが、CSS を見直すついでに font-family も考え直してみた。
で、これは私的な考え方だが、font-family でフォントを指定すること自体に必要性があるのだろうか？
OS の違い、使用するブラウザ、設定した標準フォント、フォントサイズなどなど…、こういうふうに見てくれと押し付けるのも無理な話。それなら無理に指定しない方が良いのではないかと思う。
ただ、読みやすく分かりやすく作るということではレイアウトは重要だ。そのためにはフォントを指定してレイアウトを行なわないと破綻する。この辺りが悩みどころではあるが。
稚サイトはどうなっているかというと
ということで稚サイトでは XHTML 1.0 transitional の UTF-8 で記述することを前提にfont-family: "Lucida Grande",sans-serif;としている。
これは Mac OS X だとメイリオはスキップするし Lucida Grande は標準 sans-serif フォントなので、日本語部分はヒラギノ角ゴシックで表示されるはずだ。
Firefox の標準 sans-serif もヒラギノ角ゴシックなので、その通りにレンダリングしているはず。もちろん Safari はそのように振る舞うし Opera 9.5.1 も同様だ。Camino や SeaMonkey は確認していないが、Mozilla ブラウザは Firefox 仕様ではないだろうか。
一方 Windows 環境の Firefox は、メイリオがインストールされていればそれを使うし、無ければ Lucida Grande をスキップして sans-serif 指定されているフォントで表示する。標準的な XP を使っているなら MS P ゴシックで表示するだろう。
一応 IE 6 でも確認してみたが、標準指定フォントの MS P ゴシックでレンダリングしていた。フォントサイズがおかしいという IE バグは回避できないが、ウチは IE を無視して作っているので、その他のブラウザで問題が無ければ良いという、男前な仕様のサイトなのでヨッケーなのだが。
