如何更改 Visual Studio Code 的 UI 字体？

Question

我试图弄清楚如何更改 Visual Studio Code 中非编辑器选项卡中使用的字体；现在这就是我得到的（缩放图片以更好地看到我所指的内容）：

如您所见，这些非编辑器选项卡（扩展信息、Git Graph 选项卡等）上使用了 Serif 字体，使其非常令人不愉快且难以阅读。

这种情况发生得很突然，我很确定它不是默认的，之前使用过更好看、更易读的 Sans 字体（如左侧面板），直到出现此问题。我尝试查找是否可以从 VSC 内部更改此设置，但我只能更改编辑器选项卡中使用的字体。

我不知道此行为为何以及如何开始，并且我不确定此问题是由 VSC 本身、扩展、操作系统还是其他原因引起。

如果重要的话，我正在 Linux 上工作，正在使用 KDE 完全更新的 openSUSE Tumbleweed，就像我说的，这个问题最近才开始显现出来，默认情况下它并不是这样工作的。

有任何关于如何解决这个问题的线索吗？

Answer 1

Visual Studio Code 不提供开箱即用的便捷解决方案来更改 UI 字体系列。

但是开发人员为 VS Code 创建了 Customize UI 插件。

⚠️ 编辑 02/01/2023：在版本

1.74

之后，自定义 UI 插件不再工作，请参阅此处。目前无法在 VSCode 中更改字体。

设置

1. 安装自定义 UI 插件
2. 重新启动 VS Code
3. 打开 VS Code 设置
4. 将自定义 UI 字体：等宽字体更改为

   Fira Code

5. 更改自定义 UI 字体：常规为

   Helvetica Nueve

   或

   Arial

   ，具体取决于您的操作系统

或者，您可以使用 json 设置编辑器编辑这些设置，如下所示：

    "customizeUI.font.regular": "Helvetica Nueve",
    "customizeUI.font.monospace": "Fira Code",

GitHub问题在这里

Answer 2

vscode 是一个电子应用程序，因此您实际上只需在帮助菜单中打开开发人员工具，在源选项卡下查找

workbench.desktop.main.css

的位置，进行备份并编辑操作系统的字体系列规则。 弹出一个关于 vscode 已损坏的相当粗俗的通知，但是链接文档相当清楚，它只是官方不受支持。

预计到达时间：截至 24 年 5 月 1 日。这仍然是更改字体系列的直接途径。从那以后，我一直在每次更新后手动应用此功能，并且它仍然有效，与本线程中提到的一些随机插件不同。对于 Windows，CSS 文件的路径是

\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

，CSS 选择器是

.windows

、

.mac

或

.linux

，只需将您选择的字体添加到 font-family 属性的第一个位置即可（这样您可以回退到库存设置）。它仍然会给出有关安装已损坏的错误通知，但是如果您自己在没有未经审查的第 3 方插件的情况下进行单个 CSS 更改，您可以确定这是您所做的单个 CSS 更改触发了该通知，而不是某个随机插件进一步执行修改。

Answer 3

当前更改 UI 字体的最佳解决方案是使用 VSCode 中的“Fonted”扩展。

https://marketplace.visualstudio.com/items?itemName=degreat.fonted

按照说明操作，就可以开始了

Answer 4

在大多数 Linux 发行版中，如果您同意更改系统字体，我们可以选择在系统范围内更改字体。