CSS が何も当たっていない pre 環境が、等幅でないフォントなら、等幅なフォントに変えたほうがよさそう、というお話。
それはそう。と思うんだけれど、意外と Google Chrome は初期値で固定幅フォントを選んでくれていなかったりする*1。つまり、 Google Chrome などのブラウザは pre 環境に font-family: monospace;
というスタイルを当ててくれるが、「 monospace 」を、実際に OS のどのフォントで描画するか、の選び方があまりよくない。
chrome://settings
から「フォントのカスタマイズ」で「固定幅フォント」を Consolas や Monaco, Menlo, Ubuntu Mono, Roboto Mono, Noto Mono, Source Han Code などにするとよさそう。
前半のフォントは OS 依存?だったりするので、 Google Fonts からダウンロードしたりして解決するとよさそう。 Roboto Mono はここから可能。
Noto Mono はここから可能。ついでに他の Noto フォントもここから手に入る。
ちなみに、上で挙げたものには和文が入っていないけれど、和文も含まれるフォントは、 Noto に日本語など全角文字シリーズが入った Noto Sans Mono CJK や、 Source Han Code に「源ノ角ゴシック」をくっつけた Source Han Code JP (源ノ角ゴシック Code JP) などがある。
他にも、 Myrica や Migu (M+ と IPA の合成) とかもある。「日本語フォント 等幅」とかで google 検索すればいくつか出る。せっかく pre 環境なり code 環境なりがあるので、等幅で見やすくしてみてほしいと思っている。
*1:どうにかならないかなってずっと思ってる