聊聊Monolisa和JetBrainsMono字体在编码中的体验

JetBrains Mono

早期一直是 JetBrains Mono 的使用者&＃xff0c;vscode 配置如下&＃xff1a;

// settings.json// 这里使用的是 NL 无连体版本"editor.fontFamily": "&＃39;JetBrains Mono NL&＃39;,&＃39;等线&＃39;",


JetBrains Mono 是 JB 公司出品的免费等宽字体&＃xff0c;也是在 JB 系软件上的默认字体&＃xff0c;可谓是最普及的字体之一了&＃xff0c;因为免费&＃xff0c;所以也特别受欢迎。

用了很久的 JB Mono &＃xff0c;总结好处如下&＃xff1a;

1. 免费&＃xff0c;用的人多&＃xff0c;是经过实践验证的字体

2. 字母不会很奇怪&＃xff0c;不会有各种飞舞的字形&＃xff0c;笔画都恰到好处收住&＃xff0c;符合大众口味

3. 在 vscode 上用 JB mono&＃xff0c;切到 JB 系 ide 上编码也一致&＃xff0c;日常编码间不会有割裂和不适感

总的来说 JetBrains Mono 是很不错的设计和使用体验。

几款人气字体

再另举几款比较火的字体&＃xff1a;

Operator

官网&＃xff1a;Operator fonts

很多人喜欢用的一款字体&＃xff0c;主打连体的风格&＃xff0c;特点是特别贵。

Fira

仓库&＃xff1a;tonsky / FiraCode

Fira 系列也是和 JB mono 一个重量级的字体&＃xff0c;开源免费。

Dank mono

官网&＃xff1a;Dank mono

codesandbox 早期使用的默认字体就是 dank mono &＃xff0c;这款字体给我的感觉是 f 很奇怪&＃xff0c;关于 f 的问题也有人声讨过&＃xff1a;

Issue&＃xff1a; Dank Mono is a bad font!

也有人表示某些奇怪的字形对无障碍不友好&＃xff1a;

Issue&＃xff1a;[Docs]: Dank Mono is hard to read as someone visually and cognitively impaired

对此作者的评价是有瘦字形的考量&＃xff0c;是 dank 的独特风格&＃xff0c;详见&＃xff1a;

How does everyone feel about the lowercase f?

后来 codesandbox 切到了 monolisa 。

Monolisa

官网&＃xff1a;monolisa.dev

近期从 JB mono 切到 monolisa 使用了一段时间&＃xff0c;发现了一些 monolisa 的缺点和优点&＃xff0c;这里细数一下。

优点

1. 更宽&＃xff0c;不费眼&＃xff1a;比常规字体多 7% 的字宽&＃xff0c;从很紧凑的 JB mono 切过来几个小时不太习惯&＃xff0c;但是半天就真香了&＃xff0c;眼睛的消耗效率直线下降&＃xff0c;事实证明字宽还是很费眼的&＃xff0c;现在已经很难回到 JB Mono 了&＃xff08;会感觉很挤&＃xff0c;看不清&＃xff09;。

2. 字体走形一致&＃xff1a; 这是官方的设计理念&＃xff0c;也是号称不费眼&＃xff0c;对此我的体验并没有太明显&＃xff0c;只是觉得刚使用时对长命名更清晰了&＃xff0c;比如经常有 ISomeScopeMethodModalProps 这种长接口要写&＃xff0c;个人感觉命名越长越有连贯优势。

3. 持续更新&＃xff0c;有保证&＃xff1a;官方定期会维护维修 bug &＃xff0c;并且有专门的反馈渠道&＃xff0c;加上 codesandbox 这么大的用户群体&＃xff0c;有实践验证。

4. 字形定制&＃xff0c;款式多通吃&＃xff1a;monolisa 另一个令人吃惊的是支持某些字母的字形修改&＃xff0c;比如 0 / g / &＃64; 的多种款式&＃xff0c;通吃各种开发者的习惯。

缺点

1. 紧凑连体有缺陷&＃xff1a;因为字形定制&＃xff08;见好处第 4 条&＃xff09;的存在&＃xff0c;monolisa 把连体分成了上下两 part&＃xff0c;只开上 part 是紧凑字体&＃xff0c;会对符号开启紧凑&＃xff0c;比如 // 注释字符在一起就没必要占两个字符的位置&＃xff0c;自动紧凑一些会让编码体验更好。下 part 是连体。

   这里有问题的就是只开启上 part 后符号字宽变窄&＃xff0c;会影响到 vscode 的主题着色&＃xff0c;存在一些符号连在一起没着色成功的问题&＃xff0c;比如正则内的各种 / / . 字符凑在一起&＃xff0c;这个问题有在不断改善&＃xff0c;但是还是一个痛点&＃xff0c;为了让着色完全正常&＃xff0c;只能关掉连体两个 part 了。

   有问题的情况&＃xff1a;
   

   正常的情况&＃xff1a;
   

2. 定制变体不容易作用到终端&＃xff1a;目前 vscode 等编辑器的终端字体都没有开放变体设定&＃xff0c;所以要在终端上用定制字形&＃xff0c;只能用相关工具自己打一份变体是默认设定的 monolisa 字体&＃xff0c;不过这是一个通病。

综合来说 monolisa 的利大于弊&＃xff0c;本质上存在的问题还是因为设计的很复杂&＃xff0c;因为定制度太高所以衍生了新的小问题。

这里分享一下我的 monolisa 字体设定&＃xff1a;

// settings.json"editor.fontFamily": "&＃39;MonoLisa&＃39;,&＃39;等线&＃39;","editor.fontLigatures": "&＃39;zero&＃39; on, &＃39;ss04&＃39; on, &＃39;ss06&＃39; on, &＃39;calt&＃39; off, &＃39;liga&＃39; off",


其中&＃xff1a;

• zero &＃xff1a;开启 0 替换&＃xff0c;默认中间是点&＃xff0c;替换成斜线的 0

• ss04 &＃xff1a;替换 g 到汉语拼音的 g 字形&＃xff0c;比较符合习惯

• ss06 &＃xff1a;替换 &＃64; 让他完整一些

• calt / liga &＃xff1a;关闭上下两 part 的连体&＃xff0c;关掉上 part &＃xff08;calt&＃xff09;避免上面说的紧凑着色问题&＃xff0c;关闭下 part &＃xff08;liga&＃xff09;就是关掉连体。

总结

字体会对编码效率产生影响&＃xff0c;这个因人而异&＃xff0c;屏幕分辨率越高&＃xff0c;字体产生的影响越明显&＃xff0c;这里建议在 2k &＃43; 或者 retina 屏上再注重字体&＃xff0c;分辨率太低的屏往往字体的影响效用不大。

另外字体要入正&＃xff0c;否则享受不到迭代&＃xff0c;会有无数的 bug 和坑&＃xff0c;浪费时间给自己埋雷得不偿失。