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

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

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

为什么默认字体不够好

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

• 清晰的字符区分:不再混淆 1、l 和 I
• 适当的字体微调:在常见编码字号(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. 打开 Settings → Editor → Font
2. 选择你的字体(例如 “JetBrains Mono”)
3. 勾选 Enable font ligatures
4. 调整字号(1080p 显示器通常为 13-14)

终端配置:Settings → Editor → Color Scheme → Console Font

理解 Nerd Fonts

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

为什么使用它们?现代终端工具如 Starship 或 Oh 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 Fonts 或 Coding Font 预览字体。用你的实际代码进行测试——在示例中看起来不错的字体可能不适合你的语法高亮主题。

结论

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

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

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.