UIモノスペースフォントスタック（ui-monospace）

ui-monospaceアプローチ

CSSはui-monospace汎用キーワードを導入し、すべてのオプションを明示的にリストしなくても、ブラウザがプラットフォームの推奨モノスペースフォントを選択できるようにしました。

宣言

font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
  Menlo, Monaco, Consolas, monospace;

ui-monospaceの動作

プラットフォーム	解決されるフォント
macOS / iOS	SF Mono
Windows 11	Cascadia Mono
Windows 10	Consolas
Android	Droid Sans Mono
Linux	様々（多くの場合DejaVu Sans Mono）

ブラウザサポート

ui-monospaceは以下でサポートされています：

• Safari 13.1+（macOS / iOS）
• Chrome 87+
• Firefox 89+
• Edge 87+

古いブラウザでは、ui-monospaceの後のフォールバックフォントが使用されます。

Cascadia Mono vs Cascadia Code

Cascadia Codeはプログラミングリガチャを含み、Cascadia Monoは含みません。UI要素（インラインコードバッジ、ターミナルプロンプト）にはCascadia Monoを使用してください。

Tailwind CSSとの統合

Tailwindのデフォルトfont-monoユーティリティは同様のスタックを使用します：

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}