12k
All articles

使用更好的编程字体自定义你的编辑器

对比 Fira Code、JetBrains Mono、Cascadia Code 与 Monaspace,并介绍在 VS Code 和 JetBrains IDEs 中配置连字与 Nerd Fonts 的方式。

OpenReplay Team
OpenReplay Team
使用更好的编程字体自定义你的编辑器

如果你在编码数小时后眯着眼睛看屏幕,或者在 JavaScript 中难以区分 0O,那么你使用的字体不对。合适的编程字体能够改变你的开发体验——减少眼睛疲劳,提高代码可读性,甚至让那些漫长的调试过程变得更容易忍受。

本指南将带你了解如何为编辑器和终端选择并配置现代编程字体,并提供 VS Code 和 JetBrains IDE 的实用设置说明。

核心要点

  • 现代编程字体提供清晰的字符区分、适当的字体微调以及可选的连字功能
  • Fira Code 在连字支持方面处于领先地位,而 JetBrains Mono 则在可读性和美观性之间取得平衡
  • VS Code 和 JetBrains IDE 支持独立配置编辑器和终端字体
  • Nerd Fonts 为 Starship 和 Oh My Posh 等现代终端工具添加图标

为什么默认字体不够好

大多数编辑器默认使用系统字体,如 Courier New 或 Consolas。虽然这些字体可以使用,但它们并非为现代开发工作流程而设计。最好的编程字体应具备:

  • 清晰的字符区分:不再混淆 1lI
  • 适当的字体微调:在常见编码字号(12-14px)下清晰渲染
  • Unicode 覆盖:支持现代 JavaScript、表情符号和国际字符
  • 可选的连字:将 =>!== 转换为单个可读字形

2025 年顶级现代编程字体

Fira Code:连字先驱

Fira Code 仍然是连字支持的黄金标准。它的 150 多个编程连字与 JavaScript 和 TypeScript 完美配合:

const isValid = input !== null && input.length >= 3;
const transform = (data) => data.map(item => item * 2);

提供标准版和 Nerd Font 变体(FiraCode NF),非常适合希望在终端中使用图标的开发者。

JetBrains Mono:平衡之选

JetBrains Mono 在可读性和美观性之间取得了出色的平衡。其增加的 x 高度和优化的字符形状可减少长时间编码过程中的眼睛疲劳。该字体包括连字和非连字变体。

Cascadia Code:微软的现代诠释

Cascadia Code 是 Windows Terminal 的默认字体。它提供多个变体:

  • Cascadia Code:带连字的标准版
  • Cascadia Mono:无连字版
  • Cascadia Code NF:支持现代图标的 Nerd Font 变体

Monaspace:GitHub 的创新

Monaspace 代表了可变等宽字体的最新演进。它的五个变体(Neon、Argon、Xenon、Radon、Krypton)各有不同用途,其突出特性是”纹理修复”——通过细微的宽度调整来提高可读性,同时不破坏等宽对齐。

Monaspace 还提供”Frozen Fonts”,这是为不公开 OpenType 功能控制的编辑器设计的预配置变体,确保连字和样式集在各种工具中一致工作。

Monaspace 与 Fira Code 对比:虽然 Fira Code 在连字方面表现出色,但 Monaspace 的纹理修复功能创造了更自然的阅读流畅度。如果你需要长时间编码,选择 Monaspace;如果你优先考虑广泛的连字支持,则坚持使用 Fira Code。

在 IDE 中配置字体

VS Code 设置

VS Code 将编辑器和终端字体分开,允许独立自定义:

{
  // 编辑器字体设置
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  
  // 终端字体设置(通常需要 Nerd Font 变体)
  "terminal.integrated.fontFamily": "'JetBrainsMono NF'",
  "terminal.integrated.fontSize": 13
}

要在 VS Code 中启用连字,请确保将 editor.fontLigatures 设置为 true。你也可以使用样式集:

"editor.fontLigatures": "'ss01', 'ss02', 'cv01'"

JetBrains IDE 配置

在 JetBrains IDE(IntelliJ、WebStorm、PyCharm)中启用连字:

  1. 打开 SettingsEditorFont
  2. 选择你的字体(例如 “JetBrains Mono”)
  3. 勾选 Enable font ligatures
  4. 调整字号(1080p 显示器通常为 13-14)

终端配置:SettingsEditorColor SchemeConsole Font

理解 Nerd Fonts

Nerd Fonts 在常规编程字体上添加额外的字形——文件图标、Git 符号和操作系统徽标。“NF”后缀表示 Nerd Font 变体(例如 FiraCode NFJetBrainsMono NF)。

为什么使用它们?现代终端工具如 StarshipOh My Posh 依赖这些图标来显示丰富的提示符:

 ~/projects/app  main  node v18.17.0

官方仓库或通过包管理器安装 Nerd Fonts:

# macOS
brew tap homebrew/cask-fonts
brew install --cask font-fira-code-nerd-font

# Windows (Scoop)
scoop bucket add nerd-fonts
scoop install FiraCode-NF

探索可变字体

像 Monaspace 和 Recursive 这样的可变字体提供可调整的粗细和宽度轴。这让你可以微调字体而无需切换字体系列:

// VS Code
"editor.fontVariations": {
  "wght": 400,  // 粗细: 300-700
  "wdth": 100   // 宽度: 75-125
}

安装前先测试

在安装之前,可以在 Programming FontsCoding Font 预览字体。用你的实际代码进行测试——在示例中看起来不错的字体可能不适合你的语法高亮主题。

结论

合适的编程字体是个人化的——适合一个开发者的字体可能不适合另一个开发者。从 JetBrains Mono 或 Fira Code 开始是一个安全、现代的选择。如果你想要前沿功能,可以尝试 Monaspace。记得为终端使用安装 Nerd Font 变体,如果你选择的字体支持连字,不要忘记启用它们。

最重要的是,在你的实际工作流程中对每种字体进行真实测试。你的眼睛会感谢你。

常见问题

常规字体和 Nerd Fonts 有什么区别?

Nerd Fonts 是在常规编程字体上添加了数千个额外字形的版本,包括文件图标、Git 符号和操作系统徽标。它们对于在提示符和文件列表中显示图标的现代终端工具至关重要。

连字会影响代码性能或编译吗?

不会,连字纯粹是编辑器中的视觉表现。它们不会改变代码文件中的实际字符。你的编译器看到的是原始字符,如 => 而不是连字符号。

为什么 VS Code 中我的终端字体看起来与编辑器字体不同?

VS Code 对编辑器和集成终端使用单独的字体设置。配置 editor.fontFamily 用于代码编辑器,配置 terminal.integrated.fontFamily 用于终端,以确保一致性或有意的差异。

我可以在较旧的 IDE 中使用可变字体吗?

可变字体支持取决于你的 IDE 版本和操作系统。2020 年以后的大多数现代 IDE 都支持它们,但较旧版本可能只能识别可变字体的默认粗细和宽度。

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — self-hosted, with full data ownership.

Star on GitHub

We use cookies to improve your experience. By using our site, you accept cookies.