事象
VSCodeのエディタやターミナルで、日本語の文字が中国語や韓国語のフォント(別言語のグリフ)で表示される。□や謎文字になることもある。
環境
- Windows
- VSCode
- WSL / bash
原因
- フォントが多言語グリフに対応していない
- Nerd Font と日本語フォントの指定順が悪い
- ターミナル側だけ別のフォントが指定されている
- Unicode 幅問題(WSL / bash 系で起きやすい)
- Powerline / Nerd Font のフォールバック崩れ
対策
settings.json にフォントを指定する
英数字・アイコン用の Nerd Font を先に、日本語用フォントを後に書く。
{
"editor.fontFamily": "'JetBrainsMono Nerd Font', 'UDEV Gothic 35JPDOC', Consolas, monospace",
"terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font', 'UDEV Gothic 35JPDOC'",
"terminal.integrated.gpuAcceleration": "on",
"editor.unicodeHighlight.ambiguousCharacters": false
}
-
JetBrainsMono Nerd Font:英数字・記号・アイコン用 -
UDEV Gothic:日本語用(CJK 幅問題が少なく VSCode / WSL と相性が良い)
フォントの順番に注意する
順番が逆だと Nerd Font のアイコンや英数字が崩れることがある。
// 悪い例
"terminal.integrated.fontFamily": "UDEV Gothic, JetBrainsMono Nerd Font"
// 良い例
"terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font', 'UDEV Gothic 35JPDOC'"
日本語フォントの種類
UDEV Gothic 35JPDOC または UDEV Gothic NF がおすすめ。35JPDOC はターミナル向けで日本語幅が安定している。
最も無難な設定
日本語しか使わない場合は UDEV Gothic だけでも安定する。
{
"editor.fontFamily": "'UDEV Gothic 35JPDOC'",
"terminal.integrated.fontFamily": "'UDEV Gothic 35JPDOC'"
}
まだ混ざる場合
ターミナルを閉じて VSCode を再起動する。WSL / bash が古いフォントキャッシュを持っていることがある。
locale を確認する(WSL)
locale
LANG が en_US.UTF-8 または ja_JP.UTF-8 になっているか確認する。違う場合は次を実行する。
sudo update-locale LANG=ja_JP.UTF-8
Nerd Font の認識を確認する
bash で Powerline / Nerd Font のグリフを表示し、崩れる場合は Nerd Font が認識されていない。
printf '\ue0b0 \ue0b2 \ue0a0\n'