CSSではfont-familyプロパティで要素に対してフォントを指定することができます。 もし、欧文フォントを日本語混じりの要素に対して指定しても、 英数字は指定した欧文フォントのもの、日本語はそれが含まれる他のフォントと、 自動で描画時にフォントが選択されます。
しかし、ここにちょっとした落とし穴があるので紹介しておきます。
まずは本題に入る前に欧文フォントを考える際に重要なx-heightを紹介しましょう。 x-heightとは文字通り小文字のエックスの高さです。 これは平均的な英語の小文字の大きさです。
欧文は日本語とは違ってx-heightが事実上のフォントの高さとなります。 なぜなら欧文のうち、大半の文字はx-heightしか高さの無いアルファベットの小文字だからです。
さて問題です。 欧文の中に記号を入れる際に綺麗に見える大きさはフォントの高さでしょうか? それともx-heightでしょうか?
この答えはその記号を表示するフォントしか知りません。
もし指定した欧文フォントにその記号があった場合、 その記号はx-heightにあわせてデザインされている可能性があります。
逆に指定した欧文フォントにその記号が無かった場合、 日本語環境のWebブラウザでは日本語のフォントからその記号を探すため、 結果としてフォントの高さにあわせてデザインされた記号になります。
実際にBugzilla-jpに投稿されたテストケースのスクリーンショットを見てください。 これはWindowsXP日本語版上のMozillaでのスクリーンショットです。
このスクリーンショットでは欧文フォントを指定した場合に○と●が小さくなっているのがわかります。 これは丸の高さがx-heightに揃えられているためです。 実際に欧文フォントのこれらの記号を見てください。
このように欧文フォントの記号はx-heightの高さで作られていますが、 フォントによって記号の充実度が違うこともわかります。
それに対して日本語も含まれているMS P ゴシックを見てみると、
このように文字の大きさにあわせて作られていることが分かります。
つまり、不幸にも指定した欧文フォントにその記号が存在し、 なおかつ日本語混じりの文章だった場合、フォントの高さを基準にした文章に、x-heightを基準にした記号が表示され、 不自然に小さく見えてしまうという問題が発生します。
この問題は読み手の環境次第であるというところに注意してください。 例えば、上記の欧文フォントでもWindows9xではフォントにこれらの記号が含まれていないのか、 またはこれらの記号がフォントの高さで作られているのか、 常にフォントの高さで表示されているようです。
この問題の回避方法は、無責任なフォント指定は行わない、これにつきます。 フォント関連のプロパティをWeb上で公開する文書でのデザインの一部と考えることは間違っています。 それはDTP的な考え方であり、PDFや画像で実現されることです。 決してテキストでできることではありません。 テキストでこれが実現できるのはあなたと同じOSを使い、同じフォントをインストールし、 同じブラウザで、同じバージョンを使っている場合に限られるかもしれません。
フォントに対するスタイル指定は、Webブラウザに対してユーザ自身が行っている、最適な表示環境への介入です。 訪問者に対して少なからず不快感を与えた上に、環境依存の問題によりデザインが崩れてしまっていては踏んだり蹴ったりです。 十分にこのようなリスクを考えた上でfont-familyプロパティを使うべきかどうか、考えてみてください。
ちなみに多くの場合において、 フォントの一般名の指定のみを行っている場合は言語ごとに最適なフォントをブラウザが選択しますので、 このような問題は起こらないと思われます。