font-familyのソースコード用等幅フォント設定まとめ

投稿日 2020/02/05 更新日 2020/03/11

はじめに

ソースコードを表示することを考慮した等幅フォント用のfont-familyを選定します。なお、決定版は、下記のリンク先です。次に示す残提案は当ブログでは、使用していません。

暫定案（もしくは、ただの全部載せ）

font-family(mono)pre, code, kbd, samp {
  font-family:
    'Noto Sans Mono CJK JP Regular',    /* Noto */
    'Source Han Code JP N',             /* 源ノ角 */
    'Ricty',                            /* Inconsolata, Migu 1M */
    'Ricty Diminished',                 /* Inconsolata, Circle M+ 1m */
    'Ricty Diminished Discord',         /* Inconsolata, Circle M+ 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ゴシック */
    'VL ゴシック',                      /* M+ OUTLINE FONTS */
    'M+ 1m',                            /* M+ */
    'M+ 2m',                            /* M+ */
    'Yutapon coding Regular',           /* Yutapon */

    SFMono-Regular,                     /* SF Mono, Migu 1M (macOS10.12+) */
    Consolas,                           /* 英字 (Windows7+) */
/*  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;
}

※+?: 既に存在しているが、初期バージョンかは不明

プログラミングフォント

インストールしていれば適用されます。使用するフォントのみをインストールしているならば、閲覧者の使用フォントで表示できる。

※配置順は、完全に個人的趣味です。（複数指定する場合、並び替えましょう）
※プログラミングフォントならば、和英混在でも等幅で表示できます

M+

M+ FONTS（エムプラス フォンツ）は、森下浩司によってデザインされているゴシック体の日本語フォントである。アウトラインフォントの M+ OUTLINE FONTS と、ビットマップフォントの M+ BITMAP FONTS とがある。

フリーソフトウェアであり、さらに利用・改変・再配布についてほぼ制限の無いライセンスが適用されているため、このフォントをベースにカスタマイズを施した派生フォントが多数配布されている。

フリー百科事典『ウィキペディア（Wikipedia）』."M+ FONTS" (最終閲覧日: 2020年02月05日)

上記の理由により、他フォントで多く利用されている。

源ノ角ゴシック

AdobeとGoogleが共同開発しているフォントです。「Source Han Sans」がAdobeで「Noto」がGoogleのフォントです。

※Source Han Code JPは、全角2文字で半角3文字分あるのが特徴的
※1文字の幅が他のフォントと比べて広いため、レイアウトが崩れないか注意
※文字の太さが他のフォントと比べて太いため、他フォントとの組み合わせは注意

SFMono

「San Francisco」の等幅フォントです。

Consolas

Windows7以降に搭載された英字フォントです。

Menlo

macOS10.6以降搭載のフォントです。

Monaco

macOSに同梱されているフォントです。

Roboto Mono

Android4以降搭載の英字フォントです。

※無指定でも使用されると思われるため、不採用でもよい

Liberation Mono

「Arial」「Times New Roman」「Courier New」とのフリーな互換フォントです。

Courier, Courier New

「Courier」は、タイプライター用に設計されたフォントです。「Courier New」は、「Courier」を元にしてデジタル環境用に設計されたフォントです。

※Courier、Courier New、Consolas―terkel.jp

メイリオ

WindowsVista以降採用のフォントです。等幅フォントではありません。

※標準ではありませんが、メイリオを等幅にしたフォントも存在します
　MeiryoKe

monospace

ブラウザmacOSWindows10Windows8.1
ChromeOsaka-等幅ＭＳ ゴシックＭＳ ゴシック
SafariCourier, ヒラギノ角ゴ ProN--
FirefoxOsaka-等幅ＭＳ ゴシックＭＳ ゴシック
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」は、等幅フォントではありません

参考

関連

  1. font-familyを調べまわった結果のまとめ
  2. font-familyのソースコード用等幅フォント設定まとめ
  3. 有名サイトのfont-familyを調べてみた
  4. ブログのfont-family決定版

コメント