VSCode 修改界面字体 代码字体 终端字体

界面字体

VSCode 默认不支持修改界面字体, 1.73 版本以前的 VSCode 可以安装 “Customize UI” 插件, 在 settings 中配置界面字体, 最新的版本不支持 “Customize UI” 插件, 可以手动修改 VSCode 的 CSS 文件

Customize UI 插件(老版本)

“Customize UI” 长期没有更新, 只支持 1.73 以前版本的 VSCode

1. 安装插件 “Customize UI”

安装完成后, 按照右下角的提示操作, 最后重启 VSCode

2. 修改 “Customize UI” 配置

在 UI 界面修改, 依次点击: File/Preferences/Settings/Extensions/Customize UI

或者在配置文件中添加以下内容

{
    "customizeUI.font.monospace": "Fira Code",
    "customizeUI.font.regular": "Fira Code"
}

修改核心 CSS 文件

1. 找到 CSS 文件

• 对于 ubuntu 且通过 deb 文件安装, 那么其位置为: /usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.css

• 对于 windows 通过 exe 安装时, 其位置为: D:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css, 假设 VSCode 安装位置为 D:\Program Files\

找到之后, 推荐备份一下 workbench.desktop.main.css 文件, 以免改错之后 VSCode 启动不了

在 workbench.desktop.main.css 文件中搜索关键字 .linux{font-family 或 .windows{font-family, 找到以下内容:

/* Mac */
.mac {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif
}

/* Windows */
.windows {
    font-family: Segoe WPC, Segoe UI, sans-serif
}

/* Linux */
.linux {
    font-family: system-ui, Ubuntu, Droid Sans, sans-serif
}

2. 修改 CSS 文件

在 font-family 属性的最前面加上需要修改的字体, 例如:

.linux {
    font-family: Fira Code, system-ui, Ubuntu, Droid Sans, sans-serif
}

当然以上均为格式化后的代码, 实际上看到的是"linux{font-family:system-ui,Ubuntu,Droid Sans,sans-serif}", 没有空格和换行, 修改为 “linux{font-family:Fira Code,system-ui,Ubuntu,Droid Sans,sans-serif}”

可以在 workbench.desktop.main.css 加入其他的 CSS 样式, 定制 VSCode 外观, 最后因为修改了核心文件, VSCode 会提示安装似乎损坏, 没事直接忽视掉

每次 VSCode 更新之后, 需要重新修改 workbench.desktop.main.css

Fira Code 字体下载位置: https://github.com/tonsky/FiraCode/releases

ubuntu 中安装 “Fira Code” 字体:

# 最好在临时目录解压
cd ~
mkdir Temp
mv Fira_Code_v6.2.zip ~/Temp
cd Temp
unzip Fira_Code_v6.2.zip
# 解压后将 ttf 子文件夹重命名并移至 /usr/share/fonts 下
sudo mv ttf /usr/share/fonts/FiraCode

代码字体

通过 UI 界面修改, 依次点击: File/Preferences/Settings/Text Editor/Font

在原有配置的最前面添加 ‘JetBrains Mono’

或者在配置文件中修改, 这里以 VSCode Linux 版本为例

{
    "editor.fontFamily": "'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace",
}

代码字体推荐使用 “JetBrains Mono”, 下载位置: https://github.com/JetBrains/JetBrainsMono/releases

在这里你可以预览各种字体在 VSCode 中的样式

进而在这里下载字体

终端字体

通过 UI 界面修改, 搜索栏输入 “font”, 然后选中 “Terminal”. 右侧第一项就是终端字体的配置

或者修改配置文件, 添加以下内容

{
	"terminal.integrated.fontFamily": "Cascadia Code"
}

终端字体推荐使用 “Cascadia Code”, 下载位置: https://github.com/microsoft/cascadia-code/releases