Corredor

ウェブ、プログラミングの勉強メモ。

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 NewMonaco などが存在するようだ。

総称ファミリ以外もちゃんと設定しよう

以下の記事を見ると 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 での日本語等幅は諦めよう…。

[rakuten:book:18703075:detail]