CSS で font-family: monospace 指定だと等幅フォントが適用されない？
以下のような CSS を書いたところ、li 要素が等幅フォントにならなかった。
li {
font-family: monospace;
}
PC の Firefox では等幅フォントが当たり、Chrome だと当たらなかった。さらに iPhone Safari でも等幅にならなかった。どうもブラウザのフォント設定によるようだが、総称ファミリを指定したら普通等幅フォントになりそうなのに、何故…？
どうも Generic Font Family (総称) のみだと日本語が上手く処理できないようだ。しかし、自分が試した限りだと日本語を含まない Web ページでも、英数字が等幅フォントになっていなかった。<html lang="ja"> が悪いのだろうか？
原因は分からないが、とりあえず総称ファミリだけ指定するのは上手くいかないケースが多そうだ。
iPhone で指定できる等幅フォントは？
Windows・Mac での等幅フォントというと大体相場が知れているが、iPhone で指定できる等幅フォントはどうなんだろう。
以下の記事で、iPhone に搭載されているフォント一覧が確認できた。
これを見ると、Mac でおなじみの Courier New や Monaco などが存在するようだ。
総称ファミリ以外もちゃんと設定しよう
以下の記事を見ると Courier New がオススメっぽい。
であれば、Mac や iPhone はコレで決まり。あとはこれに Windows 環境向けの Consolas を追加して、以下のようにしておくとクロスプラットフォーム対応ができるだろう。
font-family: "Courier New", Consolas, monospace;
以前記事にしたが、日本語の等幅フォントで Windows・Mac ともに採用されているフォントはないようだ。
Windows には「MS ゴシック」「MS 明朝」などが標準搭載されているが、Mac だと設定をした上でやっと「Osaka-等幅」というフォントが使えるくらい。そして iPhone には Osaka フォントはない。
僕個人でいうと、Ricty Diminished と MeiryoKe を Windows にも Mac にも入れているので、自分のブログにはコレを指定している。iPhone での日本語等幅は諦めよう…。