手持ちの Android 2機種 (Xperia XZ と Nexus 5) の Chrome ブラウザで <code> タグ内の等幅フォントを表示するのに苦戦しました。
結論としては Monaco と Courier という2つのフォントが有効でした。
| Monaco | Courier |
 |
 |
設定した font-family
最終的に <code> タグに以下の font-family を設定しました。
code {font-family: Menlo, Consolas, Monaco, monospace, sans-serif}この指定で Mac / Windows / iPhone / Android (少なくとも Xperia XZ と Nexus 5) の 4OS で等幅フォントを表示できます。
この font-family のフォントと OS の対応表をまとめると次のような形ですね。
| フォント | OS |
|---|---|
| Menlo | Mac, iPhone 向け |
| Consolas | Windows 向け |
| Monaco | Android (Xperia XZ, Nexus 5) 向け |
元々、 Menlo, Consolas, monospace, sans-serif だけを設定していたんですが、Android 端末の表示だけ等幅フォントにならず。調べてみると Android 端末が持つフォントはメーカーによっても異なるため一概には言えないようです。
しかも monospace を指定すると等幅フォントにならないという始末。
途方に暮れかけましたが、手持ちの Xperia XZ と Nexus 5 で試行錯誤したところ、 Monaco と Courier の2つの等幅フォントを表示できることが判明。Courier は文字の線が細く見にくいため Monaco を指定しています。
他の Android 機種
Xperia XZ と Nexus 5 以外の Android で Monaco と Courier フォントが有効かは不明です。Google 謹製の Nexus 5 で有効なのだから、その他の Android でも有効だといいんですが。
また、Xperia は日本でのシェアが高いため Xperia シリーズで Monaco フォントが有効であれば、日本の Android の多数で正しく等幅フォントが表示できていることになります。そのため、Monaco (もしくは Courier ) を指定しておけば問題ないのかな、考えています。
まとめ
Android の Chrome ブラウザで等幅フォントを表示する方法を調べました。Android のフォント情報は検索しても中々出てこないので、苦戦しますね。
Android 端末でも綺麗に等幅フォントを表示したい場合は参考にしてみてください。