font-familyによる等幅フォントの指定方法まとめ

CSSによる等幅フォント指定でやたら時間を食ったので、現状をまとめておきます。

まずこのページでサポートしているのは、Windows、Mac、Ubuntu, Debian, iOS, Android, ChromeOSです。 Linuxデスクトップのフォントはディストリビューションごとに異なるので、 シェアの大きいもの以外は考えたくないため、Webフォントも利用しています。

いきなりまとめてしまうと、以下が良いと思う。

等幅フォント＋ゴシックの指定

font-family:
  'Liberation Serif', 'Noto Sans CJK JP',  /* Linux/Android/ChromeOS */
  'TakaoGothic', 'VL Gothic',  /* Debian/Ubuntu */
  'Yu Gothic', 'MS Gothic',  /* Windows */
  'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Osaka-Mono',  /* Mac/iOS */
  'Noto Sans JP', Monospace;

等幅フォント＋明朝の指定

font-family:
  'Liberation Serif', 'Noto Serif CJK JP',  /* Linux/Android/ChromeOS */
  'TakaoMincho',  /* Ubuntu */
  'Yu Mincho', 'MS Mincho',  /* Windows */
  'Hiragino Mincho', 'Hiragino Mincho ProN',  /* Mac/iOS */
  'Noto Serif JP', Monospace;

古いOSでも動くよう真面目に指定していますが、古いOSなど知らんという方は、以下の記述を削除すると良いです。 最近はWebフォントもあるので、Webフォントでカバーすればバッサリ切っても大丈夫です。 WindowsやUbuntuはもう数年待ったほうが良いと私は思いますが、Mac/iOSはそろそろ削除しても良いかも知れません。

OS	フォント指定
Windows 8.1以前	MS Gothic / MS Mincho
Ubuntu 18.04以前	TakaoGothic / TakaoMincho
MacOS 10.10 / iOS9以前	Hiragino Kaku Gothic ProN / Hiragino Mincho ProN

最後に雑多な話をまとめておきます。

ヒラギノ系の指定について

Hiragino Kaku Gothic ProNの指定はサイトによって異なる事が多いです。 Hiragino Kaku Gothic ProN W3でも、Hiragino Kaku Gothic Proでも良いですが、 ProNだと厳密な表示ができ、W3だとウェイトの指定をしている違いとなります。

Monospaceについて

Monospaceの指定は、固定幅の宣言みたいなものですが、フォントサイズの指定が使い物にならないので、これを使うくらいならWebフォント (Google Fonts)を使ったほうが良いです。 何を使っても良いと思いますが、Noto Sans系列がLinux/Android/ChromeOSで使われているので、私は類似系列の Noto Sans JP / Noto Serif JP を指定しておきました。

Liberation Serif について

英字も指定しておかないと割と表示が崩れるので、それを避けるおまじないです。 Liberation Sansが指定される事もあるのですが、これを指定すると数字が汚いので、私はLiberation Serifにしました。 Monospaceをsans-serifにして、Liberation Serifを消したりしてみると、効果がよくわかると思います。