このウェブサイトではしばらく前にpreやcode要素のフォント・ファミリー指定を消した。あまり確認していなかったが、無指定なので良い感じになってくれるだろうと軽く考えていた。が、どうもMobile Safari 8で等幅フォントになっていなかったようだ。なかなかうまく再現できなかったが、どうやらlang属性で変わるようだ。また君か。
Demo: pre font on Mobile Safari 8
デモのページをMobile Safari 8で見るとlang属性でjaを指定したセクションのpre要素が等幅フォントになっていないことがわかる。このページにはスタイルは当てておらず、まったく同じ内容を持つがlang属性のないセクションではpre要素のフォントはちゃんと等幅フォントになっている。
lang=zhで報告されているBug 96348と同じで、内部のフォント設定によるフォールバックがsans-serifと同じになっていることによる現象のようだ。根本的な原因は今のOS XやiOSに明確な日本語の等幅フォントというものが存在しないことにあり、もしかしたらデスクトップのSafariやFirefox、Chromeでも同じ現象が起こるのかもしれない。
WONTFIXにはなっていないが、原因を考えると直りそうもないので、対処としては何らかのフォントを必ず指定してやるしかなさそう。このウェブサイトのように主にコードの表示に使っている場合はMenloなりの確実にインストール済みの欧文等幅フォントを指定するのが妥当だろう。汎用ファミリーの解釈において問題が出てくるため、Normalize.cssのようなmonospace, monospaceでは対処することはできない。
Chrome 42の問題とこれと立て続けに遭遇したので、lang属性は指定しない方が良いみたいな妄想が現実味を増してきたような気がして恐ろしい。