モノスペースコーディングフォントスタック

モノスペースコーディングフォントスタック

よく作られたモノスペースフォントスタックは、コードブロック、ターミナル出力、表形式データがすべてのプラットフォームで一貫してレンダリングされることを保証します。

宣言

font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
  "SF Mono", Consolas, Menlo, Monaco,
  "Liberation Mono", "Courier New", monospace;

フォント別詳細

フォント	プラットフォーム	リガチャ
JetBrains Mono	Webフォント（セルフホストまたはGoogle Fonts）	あり
Fira Code	Webフォント / 一部のLinuxディストロ	あり
Cascadia Code	Windows Terminal、VS Code	あり
SF Mono	macOS / Xcode	なし
Consolas	Windows Vista+	なし
Menlo	macOS（デフォルトターミナルフォント）	なし
Monaco	macOS（レガシー）	なし
Liberation Mono	Linux（Courier Newとメトリクス互換）	なし
Courier New	ユニバーサル	なし
monospace	汎用キーワード	様々

フォントリガチャ

リガチャは複数の文字を単一のグリフに結合します。例えば、=>が矢印になり、!==が取り消し線付き等号になります。有効にするには：

font-variant-ligatures: contextual;

サイズの考慮

モノスペースフォントは、同じfont-sizeでもプロポーショナルフォントより大きく見えることがよくあります。一般的には、コードのフォントサイズを本文テキストより1-2px小さく設定します：

code { font-size: 0.875em; }