Neo's Normalize v2.0.1 の等幅フォント指定

拙作のノーマライズ CSS、Neo's Normalize を v2.0.1 にした。等幅フォントの定義を色々と変えた。

僕は元々「メイリオ改 MeiryoKe」という等幅フォントが好きでよく使っていたのだが、最近は Noto Sans Mono CJK JP を使っている。コチラの方がもう少し一般的で、利用者も多いことだろう。ということで MeiryoKe_Gothic の指定を削除したのが一つ。和英両方に対応している等幅フォントとしては、

• Noto Sans Mono CJK JP
• Osaka-mono
• MS Gothic

の3つを指定することにした。

ココまでの指定は、iOS では一つも効かない。Noto Sans Mono CJK JP のウェブフォントを読み込んでも良いのだが、ファイルサイズがデカいので止めた。iOS で和英混在の等幅フォントを表示するのは諦めることにする。

iOS に標準搭載されている等幅フォントは、Monaco、Menlo、Courier、Courier New あたり。最近は SF-Mono とかも使えるのかもしれないが、どうも思ったとおり効かないので除外している。で、Monaco は周りのフォントよりも少し大きめに表示されて違和感があるので、Menlo を採用することにした。Monaco は入れていない。Menlo さえ当たれば大丈夫だと思うが、次点で Courier の見栄えが良く、Courier New は細すぎて好きじゃないので最後に指定した。

Windows 向けには MS Gothic だけでも事足りそうだが、もう少し文字が太くて見栄えが良いので Consolas を入れておく。Courier も Courier New も、Windows・Mac 両方に標準搭載されているので、コレもフォールバックで入れておく。

ということで、次のように定義した。

:root {
  --nn-font-family-monospace: "Noto Sans Mono CJK JP", Osaka-mono, "MS Gothic", Menlo, Consolas, Courier, "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

コレで、Windows も Mac も iPhone もイイカンジに表示できている。