diff --git a/app/globals.css b/app/globals.css index 9f1c86b..a693efb 100644 --- a/app/globals.css +++ b/app/globals.css @@ -126,25 +126,28 @@ mycdark: 日本語フォントは正直なんでもいいが、 あまり変なフォントが選ばれるとxtermやaceエディターの表示が崩れる可能性があるので、 - 確実にフォントを統一するためにRoundedM+を指定することにした + 確実にフォントを統一するために本文と同じフォントを指定することにした 以前NotoSansJPを指定していたが、xterm.jsで全角の()の幅がバグった + BIZUDゴシックとMeiryoは全角の”’の幅がおかしいが、まあ使うことないやろ */ --font-mono: - "Inconsolata Variable", "Rounded M+ 1c", "Rounded M+ 1p", - "M PLUS Rounded 1c", monospace; + "Inconsolata Variable", "BIZ UDゴシック", "Meiryo", "Rounded M+ 1c", + "Rounded M+ 1p", "M PLUS Rounded 1c", monospace; /* 本家のフォント名は Rounded M+ 1c 、または1pでもいいかも layout.tsxでインポートしているwebフォントが M PLUS Rounded 1c - それ以下はM+をダウンロードするまでの間表示されるswap用フォールバックとしてM+に見た目が近いものを指定。 + + ただしWindowsではウェブフォントのM+Roundedを使うとアンチエイリアスが効かず見栄えが悪いため、 + M+よりも優先してSegoe UI, BIZ UDゴシックを代わりに使用する + Hiragino Maru Gothic は見た目はめっちゃきれいなんだけど太字がない :cry: - Meiryo は日本語の形がM+に近いが、英数がダメ */ --font-sans: - "Rounded M+ 1c", "Rounded M+ 1p", "M PLUS Rounded 1c", - /* 以下fallback */ "M+ 1c", "MigMix 1c", "Migu 1c", + "Segoe UI", "BIZ UDゴシック", "Meiryo", "Rounded M+ 1c", "Rounded M+ 1p", + "M PLUS Rounded 1c", /* 以下fallback */ "M+ 1c", "MigMix 1c", "Migu 1c", "Hiragino Maru Gothic ProN", "Noto Sans", "Arial", "Liberation Sans", - "Meiryo", sans-serif, + sans-serif, /* TailwindCSSでデフォルトで指定されていた絵文字フォントは一応残しておく */ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx index de5a8ce..f1a216e 100644 --- a/app/terminal/terminal.tsx +++ b/app/terminal/terminal.tsx @@ -134,7 +134,7 @@ export function useTerminal(props: TerminalProps) { lineHeight: 1.2, letterSpacing: 0, fontFamily: - "'Inconsolata Variable', 'Rounded M+ 1c', 'Rounded M+ 1p', 'M PLUS Rounded 1c', monospace", + "'Inconsolata Variable', 'BIZ UDゴシック', 'Meiryo', 'Rounded M+ 1c', 'Rounded M+ 1p', 'M PLUS Rounded 1c', monospace", theme: computeTerminalTheme(), }); terminalInstanceRef.current = term;