WebStorm 系统字体设置与字体推荐

系统字体

Yuppy SC 字体：https://download.csdn.net/download/weixin_40013817/85585123

两处字体设置，别搞混

WebStorm 里有两套独立的字体配置，改错地方会以为设置没生效：

系统字体（UI 字体） — 菜单栏、侧边栏、对话框、设置面板这些界面元素用的字体。路径是 Settings → Appearance & Behavior → Appearance，勾上 Use custom font 之后选字体和字号。上图就是这一处。
编辑器字体（代码字体） — 编辑区里代码用的字体。路径是 Settings → Editor → Font。

改 UI 字体的动机通常是默认的中文显示不好看。JetBrains 从 2020 版开始默认用自家的 Inter（早期是 Roboto），拉丁字符没问题，但中文字符会 fallback 到系统的默认中文字体，两种字体的字重、字高不一致，混排时看起来会「一高一低」。换成一个本身就包含中文字形的字体，混排就整齐了，这是 Yuppy SC 这类字体的用处。

改完 UI 字体需要重启 IDE 才完全生效——部分已经渲染过的面板不会立即刷新。

代码字体该怎么挑

代码字体和 UI 字体的要求完全不同，有三条硬指标：

1. 必须等宽（monospace）。不等宽的字体会让对齐的代码错位，缩进和列对齐全乱。

2. 易混字符要能区分。这是最实际的一条。要重点看这几组：

0（零）和 O（大写欧）— 好的编程字体会给零加斜杠或点
1（一）、l（小写 L）、I（大写 i）— 三个都是竖线的字体读起来很痛苦
; 和 : — 分号的尾巴要够明显
' 和 ` — 反引号在 JS 模板字符串里天天用，和单引号混了很难查

挑字体时找一段测试文本试一下：0O l1I ;: '\ {}`。

3. 中文字符的宽度。理想情况下一个中文字符正好占两个英文字符宽（全宽/半宽 2:1），这样中文注释和代码的缩进不会错位。做到这一点的字体不多，Sarasa Gothic（更纱黑体）是专门为此设计的。

几个值得试的编程字体

我自己换过好几轮，现在的取舍是这样：

JetBrains Mono — WebStorm 自带，不用额外装。字形高（x-height 大）在小字号下清晰，0 带斜杠，连字（ligature）设计得克制。作为默认选择完全够用，如果懒得折腾就用它。
Fira Code — 连字功能最出名的一个，=> 会渲染成一个箭头、!== 会渲染成带斜杠的等号。喜不喜欢因人而异，连字会让「实际字符数」和「看起来的字符数」不一致，调试正则或者数字符位置时反而添麻烦。
Cascadia Code — 微软给 Windows Terminal 做的，也带连字，字形比 Fira Code 更圆润一些。
Sarasa Mono SC（更纱黑体等宽）— 中英文严格 2:1 等宽，基于 Iosevka 和思源黑体合成。中文注释写得多的话这个是最优解，代码对齐永远不歪。
Source Code Pro — Adobe 出的，没有连字，非常朴素。想要一个不花哨、久看不累的选择就用它。

装字体的方式：macOS 双击 .ttf/.otf 文件在字体册里点安装，或者直接把文件拖进 ~/Library/Fonts/；Windows 右键选「为所有用户安装」。装完必须重启 WebStorm，IDE 只在启动时扫一次系统字体列表，不重启新装的字体不会出现在下拉框里。

连字（Ligatures）要不要开

在 Settings → Editor → Font 里有个 Enable ligatures 勾选框，需要字体本身支持才有效果。

开的好处是 =>、>=、!=、=== 这些符号组合看起来更像数学符号，视觉上更简洁。坏处有两个：一是光标在连字中间移动时位置会显得跳跃（一个连字实际是两三个字符）；二是 code review 时截图给别人看，对方如果不用连字会觉得你写的符号很奇怪。

我的做法是编辑器里开、终端里关。终端里经常要数字符位置（比如看报错指向第几列），连字会干扰判断。

字号和行高

这两个参数在同一个设置页：

Size — 编辑器字号。13～15 是常见区间，取决于屏幕分辨率和你和屏幕的距离。外接 4K 显示器上我用 15，笔记本内屏用 13。
Line height — 行高倍数，默认 1.0（有些版本是 1.2）。这个值调到 1.2～1.4 之后代码的可读性提升明显，尤其是嵌套多的代码，行与行之间有呼吸空间不容易看错行。这是我认为性价比最高的一项设置，很多人从来没动过它。

字号还有一个隐藏技巧：在 Settings → Editor → General 里勾上 Change font size with Ctrl+Mouse Wheel（macOS 是 Cmd），之后按住修饰键滚滚轮就能临时缩放编辑器字号。演示代码给别人看的时候很方便。

快速切换外观的做法

字体、主题、字号这几项经常要为不同场景调整（写代码 vs 投屏演示）。WebStorm 有个 Presentation Mode 和 Distraction Free Mode，在 View → Appearance 里，前者会大幅放大字号并全屏，后者隐藏所有面板只留编辑区。投屏时直接切 Presentation Mode，比手动调字号快，而且退出后自动恢复原设置。

想让字体设置在多台机器间同步，用 JetBrains 的 Settings Sync（Settings → Settings Sync），登录 JetBrains 账号后字体、主题、快捷键、插件列表都会同步。注意它同步的是「字体名称」，如果另一台机器上没装这个字体，会静默 fallback 到默认字体，所以字体文件本身还得手动装一遍。