font-familyのソースコード用等幅フォント設定まとめ
はじめに
ソースコードを表示することを考慮した等幅フォント用のfont-familyを選定します。なお、決定版は、下記のリンク先です。次に示す残提案は当ブログでは、使用していません。
暫定案（もしくは、ただの全部載せ）
font-family(mono)pre, code, kbd, samp, var {
font-family:
'Noto Sans Mono CJK JP', /* Noto */
'Source Han Code JP', /* 源ノ角 */
'Ricty Diminished', /* Inconsolata, Circle M+ 1m */
'Ricty', /* Inconsolata, Migu 1M */
'Myrica M', /* Inconsolata, 源真ゴシック or Mgen+ */
'MyricaM M', /* Inconsolata, Mgen+ */
'Rounded M+ 1m regular', /* M+ OUTLINE FONTS, 源ノ角ゴシック */
'Rounded M+ 2m regular', /* M+ OUTLINE FONTS, 源ノ角ゴシック */
'Rounded Mgen+ 1m regular', /* M+ OUTLINE FONTS, 源ノ角ゴシック */
'Rounded Mgen+ 2m regular', /* M+ OUTLINE FONTS, 源ノ角ゴシック */
'Migu 1M', /* M+, IPAゴシック */
'Migu 2M', /* M+, IPAゴシック */
'M+ 1m', /* M+ */
'M+ 2m', /* M+ */
SFMono-Regular, /* SF Mono, Migu 1M (macOS10.12+) */
Consolas, /* 英字 (WindowsVista+) */
/* Menlo, /* 英字 (macOS10.6+) */
/* Monaco, /* 英字 (Classic Mac OS+) */
'Roboto Mono', /* 英字 (Android4+) */
/* 'Liberation Mono', /* Arial or Times New Roman or Courier New */
'Courier New', /* Courier (macOS10.3+?, iOS4+?, WindowsXP+?) */
/* Courier, /* 英字 (macOS10.3+?, WindowsXP+?) */
/* 'Osaka-mono', 'Osaka-等幅', /* 日本語 (Classic Mac OS-) [mac:monospace] */
Meiryo, /*'メイリオ', /* 日本語 (WindowsVista+) */
/* 'MS Gothic', 'ＭＳ ゴシック' /* 日本語 (Windows3.1+) [win:monospace] */
monospace;
}※+: 指定バージョン以降に存在する
※+?: 既に存在しているが、初期バージョンかは不明
※-: 指定バージョン以前に存在する
コードの補足
pre, code, kbd, samp, var, tt
font-size
標準のフォントサイズは、16pxとされています。ですが、等幅フォントのそれより少し小さいサイズ（14px程度）を使用するのが一般的です。
和英混在の等幅、英字のみ等幅
等幅フォントを使用する主目的は、和英混在を等幅に表示することです。ですが、英字のみ等幅にする考え方もあります。
font-family: monospace, monospace;
上記のコードとは関係ありませんが、font-familyにmonospaceを単独で指定した場合、ブラウザが勝手にフォントサイズを小さくする問題があります。これを回避するために、font-familyにmonospaceを単独で指定したい場合、にmonospaceを2つ重ねて記載することでこの問題を回避できるハック手法が存在します。
プログラミングフォント
閲覧者が独自にインストールしていれば表示されます。使用するフォントのみをインストールしていると考えれば、閲覧者の使用フォントで表示できます。
※配置順は、完全に個人的趣味です。（複数指定する場合、並び替えましょう）
※プログラミングフォントならば、和英混在でも等幅で表示できます。
M+
M+ FONTS（エムプラス フォンツ）は、森下浩司によってデザインされているゴシック体の日本語フォントである。アウトラインフォントの M+ OUTLINE FONTS と、ビットマップフォントの M+ BITMAP FONTS とがある。
フリーソフトウェアであり、さらに利用・改変・再配布についてほぼ制限の無いライセンスが適用されているため、このフォントをベースにカスタマイズを施した派生フォントが多数配布されている。
フリー百科事典『ウィキペディア（Wikipedia）』."M+ FONTS" (最終閲覧日: 2020年02月05日)
上記の理由により、他フォントで多く利用されています。
Inconsolata
Inconsolataは、Windows Vista/7に標準搭載されているConsolasフォントに感銘を受けた作者がConsolasを意識して作成したフォントです。そのため、
源ノ角ゴシック
AdobeとGoogleが共同開発しているフォントです。「Source Han」がAdobeで、「Noto」がGoogleのフォントです。
※Source Han Code JPは、全角2文字で半角3文字分あるのが特徴的
※1文字の幅が他のフォントと比べて広いため、レイアウトが崩れないか注意
※文字の太さが他のフォントと比べて太いため、他フォントとの組み合わせは注意
SFMono
「San Francisco」の等幅フォントです。macOS/iOSに搭載されています。
Consolas
WindowsVista以降に搭載された英字フォントです。
Menlo
macOS10.6以降搭載のフォントです。
Monaco
macOSに同梱されているフォントです。
Roboto Mono
Android4以降搭載の英字フォントです。
※無指定でも使用されると思われるため、不採用でもよい
Liberation Mono
「Arial」「Times New Roman」「Courier New」とのフリーな互換フォントです。
Courier, Courier New
「Courier」は、タイプライター用に設計されたフォントです。「Courier New」は、「Courier」を元にしてデジタル環境用に設計されたフォントです。
メイリオ
WindowsVista以降採用のフォントです。等幅フォントではありません。
※標準ではありませんが、メイリオを等幅にしたフォントも存在します
MeiryoKe
monospace
| ブラウザ | macOS | Windows10 | Windows8.1 |
|---|---|---|---|
| Chrome | Osaka-等幅 | ＭＳ ゴシック | ＭＳ ゴシック |
| Safari | Courier ヒラギノ角ゴ ProN | - | - |
| Firefox | Osaka-等幅 | ＭＳ ゴシック | ＭＳ ゴシック |
| Edge | - | Consolas ＭＳ ゴシック | - |
| IE11 | - | Courier New ＭＳ ゴシック | Courier New ＭＳ ゴシック |
※ブラウザのデフォルトフォント / もうパンツはかない
ブラウザのデフォルトフォント / もうパンツはかない
各種ブラウザ デフォルト フォント 一覧 - Windows ＆ IT Tips
Webブラウザのデフォルトのフォント
※macOS（Mac OS X）は、Osakaは標準搭載されていない。だが、moanospace指定に限り「Osaka-等幅」が使用される
※macOSは「ヒラギノ」「Osaka」が適用される
※Windowsは「ＭＳ ゴシック」が適用される
ただし、特定条件（詳細条件不明）を満たすと「Meiryo」になる
例：<html lang="en">
補足：「Meiryo」は、等幅フォントではありません