合成フォントはひらがなやカタカナ、漢字、英数字などの字種にそれぞれ任意のフォントを設定して1つのフォントの様な感覚で取り扱えるフォントです。スタイルシートでも日本語はメイリオで、半角英数字はHelveticaでといった形で表示ができます。今回はスタイルシートで設定する半角英数字+日本語フォントのお話を取り上げてみます。

日本語フォントはメイリオとヒラギノ角ゴで設定し、半角英数字は代表的な6種類のフォントを使い合成フォントのパターンを作ってみました。

メイリオ

ヒラギノ角ゴ

フォント固有の形状

フォントにはそれぞれ固有の高さがあり、同じポイント数で指定しても高さが異なる場合があります。あまりにも形状が違いすぎると、組み合わせによっては可読性が落ちる事もあります。
CourierやGeorgia、Times New Romanはメイリオやヒラギノ角ゴに比べると小さく表示されます。
またCourierは字間が広く、Times New Romanは狭いです。

スタイルシートでの指定方法

スタイルシートで組み合わせる場合は、先に半角英数字のフォントを記述し次に日本語フォントを記述します。

.Arial  { font-family:"Arial","メイリオ","ヒラギノ角ゴ Pro","MS Pゴシック","sans-serif"; }

上記のサンプルの場合半角英数字はArialにて、日本語はメイリオ、ヒラギノ角ゴ Pro、MS Pゴシックの順で表示されます。フォントデータがインストールされてなければsans-serifで表示となります。