さて、前回の続き。内容は表題のとおりです。
拙作 h2v.js で綺麗な縦書き表示をするためには、和文字が等幅なフォントが必須です。で、さまざまなOSに（日本語環境であれば）標準でインストールされているはずの日本語（等幅）フォントを調べてみる。
以前にも調べたような気がするけれど、月日も経っているし、あらためて。
Windows 8 / 7 / Vista :
Windows XP :
MacOS X 10.5以降 :
- ヒラギノ角ゴシック ProN（ゴシック体）
- ヒラギノ明朝 ProN（明朝体）
- ヒラギノ角ゴシック Pro（ゴシック体）
- ヒラギノ明朝 Pro（明朝体）
※ProN は、10.5 & 10.6 と 10.7 以降でバージョンが異なる。（参照）
MacOS X 10.4 :
- ヒラギノ角ゴシック Pro（ゴシック体）
- ヒラギノ明朝 Pro（明朝体）
iOS :
- HiraKakuProN-W3（ゴシック体）
- HiraMinProN-W3（明朝体）
Ubuntu :
- TakaoExゴシック（ゴシック体）
- TakaoEx明朝（明朝体）
- Takaoゴシック（ゴシック体）
- Takao明朝（明朝体）
Android :
…とっちらかっていて判らない。端末ごとに違うっぽいが、とりあえずシステムフォントは
- Droid Sans Japanese（ゴシック体）
（以下、2013.01.31 追記）
Android 4.0:
- モトヤLシーダ3等幅（ゴシック体）
- モトヤLマルベリ3等幅（丸ゴシック体）
ということで、どのOSプラットフォームでも日本語を等幅表示してほしい、ならば、スタイルシートで、
ゴシック体の場合：
font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
明朝体の場合：
font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;
/* Android では ゴシック体表示 */
と、こんな感じ。フォントファミリー名とフォント名が混在していてあまりよろしくないけれど、ご容赦。字体よりも「等幅」であることが大切! なときは、最後の sans-serif や serif を monospace にするのも良いかもしれません。ただし sans-serif / serif / monospace にどのフォントが割り当てられているかは、ユーザのブラウザでの設定に依存します。
ちょっと古めの Mac のことを考慮に入れるならば、
'ヒラギノ角ゴ Pro' , 'Hiragino Kaku Gothic Pro'
あるいは
'ヒラギノ明朝 Pro' , 'Hiragino Mincho Pro'
…を、〜 ProN のうしろに入れておくと良さそうです。
スタイルシートを記述するときの注意としては、
- font-family は、先に記述したものから適用される。
- 名前に 日本語 あるいは スペースが含まれるフォントは '〜' か "〜" で囲う。
- "MS なんちゃら" の日本語名の "ＭＳ" は全角。間のスペースは半角。
- 日本語名と英語名を併記しなくても、おそらく大概のブラウザで指定は有効になる。ただし Opera は、日本語名があるフォントに関しては日本語名しか受け付けないっぽい。
ということで。
この記事には最新の追記があります。
- 各OSに標準でインストールされているフォントを調べる。 最新版。[2014.10.05]
コメント