Fira Code: 一个有趣而实用的编程字体

Fira Code 是一个有趣的编程字体。我尤其喜欢它的连字特性:比如,!=会被自动缩写为=>会被缩写为;另外,相邻的加减号、不等号等会被连在一起,方便阅读代码。我认为,这样的特性对编程来说是相当舒服的。

本文中我将简单介绍这个字体,并给出官方的下载链接和安装指南。我还将简单介绍相关的连字解决方案,适用于一些无法使用Fira Code的情况。在一些情况下,连字字体会造成误解,因此我们需要谨慎使用这类连字字体。


为什么我们需要Fira Code

编程语言中常有许多运算符以字符组合的方式出现。从==!=<>->...,这些字符组合一旦被拆散,它们的意义就将和原来不同,我们视它们为一个个独立的逻辑标识,因此可以认为应该让它们之占一个字符的空间;但因Ascii码规定的可视字符数量有限,编程语言需要的运算符数量却多于这一有限的字符数量,编程语言就必须使用多个字符来表达这些逻辑标识。由此我们就需要一种方法,能将这些字符组合重新组装为一个字符,能缓和有限的字符数量和无限的编程实际需要之间的矛盾。

正如下图所示,在运用了字符集黑科技、遵守了先进的Unicode技术规范的前提下,Fira Code作为一种等宽字体,通过实现编程连字特性,有效地缓和了这一矛盾:

Fira Code 效果示意

下面笔者将稍稍深究这一字体的特性,也对类似的连字解决方案稍作涉及。如读者想直接下载字体体验一把,可以跳转到下载、安装和注意事项

稍详细的介绍

Fira Code 的开发者是来自俄罗斯的Никита Прокопов(他的GitHub主页),项目可以在GitHub找到(项目网页),截至撰写本文时,该项目已有两万多个Stars,可见其广受欢迎。

能处理的字符

笔者体验了一把Fira Code,发现它能够把大部分编程语言用得到的字符组合全都拼合在一起。能够处理的字符大致可分为以下几类:

  1. 等号相关类。如判断相等的双等号==,PHP等语言用到判断强相等的三等号===以及它们的不等形式!=!==,go语言中的定义并赋值:=,Rust中的双端闭区间..=等。另外还有其它语言的=:==!==/=等符号。笔者注意到,!=!===/=三个符号的拼合版本长得比较像,需要我们仔细做出区分。
  2. 各类箭头和指向符号。简单的例子有->-->=>等。这里例子比较多,笔者不一一列出。需要注意的是=<<>>=等符号和Ascii形式相差较大,需要我们习惯。
  3. 不等号和各类括号。>=<=的拼合形式和Unicode里的大于小于号相差无几。另外还有{..}<||||||>等,例子也特别多。另外<$$><++>几个符号因为能够将两个符号的空隙拼插在一起,可以把字符做得更大,方便阅读。需要注意的应该有一点,在写博文的时候如果使用这个字体,不要把拼和的大于小于号和真正的Unicode中的符号混淆了,尤其是和MathJax代码一起写的时候…
  4. 常量与运算符。这个字体做得十分详细周到,甚至照顾到0xFF等常量,它会将常量中的x纵向居中。另外,他会放大字母或数字中的加减乘除运算符,例如20x50a+b,它会将运算符放大并纵向居中。另外还有*ptr这样的指针表示形式。笔者个人比较喜欢这种五角星的乘号。
  5. 连续的组合符号。例子有;;:::::.....这些在不同语言中意义不同的符号。逻辑表达式中的&&||也合并在一起。另外还有+++++-----*****%%等。将三个乘号叠在一起时,中间的乘号会提升到上方,以便区分。关于井号,有#########,以及#[#(#{等组合。Kotlin语言中比较咆哮的!!??也得到了照顾,让看代码更舒服一些。例子还有..<?:?.这些符号。
  6. 运算符和等号。比如/=/==。但+=-=这些符号没有专门的优化,似乎是因为不组合的情况下可读性更大一些。
  7. 杂项组合。比如~=表示某些语言中的约等于。笔者看到了~-~@等组合,可能在一些语言下能提高可读性。另外还有www在一起的组合,方便Ruby等语言的开发。

可以发现,Fira Code不仅在编程中,在写博客中也能一定程度上简化许多步骤。比如,...组成省略号就比用中文输入要简单一些;用>=的组合代替Unicode的大于等于,就能节省写文章的时间。这些情况下就需要注意要给网页或打印设备安装这个字体。

引用一张项目网页的图片:

另外,项目网页中强调,这个字体只提供一种渲染功能,不会真的把代码中的字符替换掉,代码中的字符组合依然由符合标准的Ascii码构成。

实测效果

笔者习惯于使用VSCode和IntelliJ IDEA这两个IDE。分别打开一段Rust代码,与没有连字功能的其它常见字体对比,笔者获得了这样的视觉体验:

这是IDEA中Darcula主题的效果,对比字体为Monaco:
Monaco vs Fira Code @ IDEA

这是VSCode上的效果,对比字体为Menlo:
Menlo vs Fira Code @ VSCode

笔者发现,无论哪款IDE,换用Fira Code后,=>(22、23行等)、::(3、4、5行等)等字符均能正常变化,且一定程度上提高了可读性;Fira Code 是一个理想的替代字体。

除此之外,项目网页中还有其它语言的代码例子,在此就不搬运了,感兴趣的读者可以自行前往查看。其它代码例子

本部分所用的测试代码来自《TRPL》的有关章节。测试代码来源

兼容性

需要注意的是,因使用的渲染方式特殊,并不是所有编辑器和控制台都支持Fira Code。幸好,实测效果中我们可归纳出,主流的IDE如VSCode、IDEA都是支持这一字体的。如需使用这一字体,你可能需要更换一个编辑器,这就需要知道你的编辑器是否支持该字体。另外,正常显示Fira Code的连字功能还需要对IDE进行一定的设置。

下面这个网页包含支持的编辑器(在列表内)和IDE的设置方法(在左侧instructions内):Editor Support

笔者并没有使用vs2017开发。据好友测试,vs2017并不完全支持该款字体(可以显示字体,不能显示连字)。在一篇GitHub issue中,网友实测在同一台设备上,vs2017不能支持,而vs2016是支持的。也有网友指出,这和问题也许是vs2017的bug之一,但提供了解决方案:在windows系统上,可以通过启用Cleartype来开启vs2017对连字字体的支持。解决方案

项目网页并没有指出兼容性与操作系统的关系。笔者认为,这款字体是否兼容与操作系统并无太大关系,只要IDE或控制台有这方面的支持即可。也许我的认识并不是正确的,若有偏谬之处,还请读者斧正。

中文支持

Fira Code仅渲染了部分拉丁字符和标点符号,经实测,在大部分IDE中是兼容中文字符的,因为它并没有对中文字符进行重写。但在一些终端中,中文格式是存在显示问题的,笔者认为,这可能与这款字体无关,需要按照安装说明安装实测。

其它相关实现

除了Fira Code,还有类似的方法能够实现连字特性。

vim-javascript

作为一款vim插件,vim-javascript(项目页面)主要功能是为vim编辑javascript这个语言提供语法高亮和缩进改进。只需要在控制台中输入以下指令(适用于linux或mac系统),就能安装这款vim插件:

1
git clone https://github.com/pangloss/vim-javascript.git ~/.vim/bundle/vim-javascript

据项目页面介绍,它也有连字的特性,能够通过替换一些关键字的符号,实现一部分的连字功能。笔者认为,若是按照字符替换的形式实现,它的的自由度并不会比Fira Code大,因为这款插件并不能替换字体,而只能以已有的字体为载体。就像项目页面中“掩盖字符”(Concealing Characters)一节提到的:

1
2
3
4
5
6
//此处节选一部分
let g:javascript_conceal_NaN = "ℕ"
let g:javascript_conceal_prototype = "¶"
let g:javascript_conceal_static = "•"
let g:javascript_conceal_super = "Ω"
let g:javascript_conceal_arrow_function = "⇒"

笔者按照项目页面安装这款vim插件后,使用vim编辑js文件,发现可以实现括号对的语法高亮,但经过多种方法配置,均未能实现连字特性,望有能配置成功的读者提供给我正确的配置方法,或说明我的系统环境不支持。笔者的操作系统是macOS 10.13.5,使用的vim版本为8.0.1283。

Emacs

Emacs 24.4有一个漂亮的prettify-symbols-mode模式,例如可以在lisp语言中,将lambda显示为λ。完整的教程可以查看这篇文章:Emacs: Display Lambda as λ

下载、安装和注意事项

下载地址

Fira Code 直接在 GitHub 页面的release中提供字符下载,只需要进入Release网页,找到最新的FiraCode_1.xxx.zip,点击下载即可。Release网页

如果无法在官网下载,有一篇csdn文章提供了一个中国的镜像下载地址,可以前去围观。csdn文章 by 身披白袍

安装方式

这款字体的安装方式和其它字体类似,因操作系统的不同,需要采取不同的步骤。官网的安装方式提供在wiki页面中,英文不错的话可以自己进去钻研钻研。这个页面也提供许多主流IDE更改字体的方式,可做参考。Wiki页面

安装后若未正常显示,可跳转到上文兼容性部分。

注意事项

这款字体给开发者本人看可谓赏心悦目,但如果截屏发给不使用这款字体的朋友,可能会给他们理解困难,甚至(某种程度上)会误导一些初学者。在OI(包括NOI、ACM等)系列竞赛中,我们还需使用常规的非连字字体,来保证团队协作的高效。这些是所有连字字体共有的提醒事项,请各位使用时多加注意。

尾声

Fira Code 可能是我见过最有趣的字体了。刚开始编程的时候我喜欢Consolas,它对中文的支持不是很好,后来就下载了贴吧大神提供的Consolas+雅黑混合版,但也只能有限地让代码看着更舒服,也有不舒服的地方,或者说,有痛点,但就是找不到在哪。这次偶遇Fira Code让我恍然大悟,一下子就喜欢上了这款字体。这让我想起我的安卓小手机首次刷CyanogenMod(现在好像不叫这名字了)之后,WiFi标识旁总有个感叹号(表示此WiFi没有连接到因特网,事实上是因为无法连接到评估服务器。谷歌安卓默认的评估服务器已经被墙),每次连接都不知道这个WiFi到底有没有网络,我非常郁闷;一回偶遇noisyfox提供的叹号杀手,修改了评估服务器地址,叹号消失了,心情也不郁闷了。或许许多的偶然相遇都能像这样让我们眼前一亮吧。

感谢

群友@pengpengche,让我能够发现Fira Code这款好字体,也开阔了我的视野,给我提供了相关的解决方案。

群友@腹黑猫、@很菜的玄简君,让我能注意到一些隐藏的问题。

谢谢你们!

文章目录
  1. 1. 为什么我们需要Fira Code
  2. 2. 稍详细的介绍
    1. 2.1. 能处理的字符
    2. 2.2. 实测效果
    3. 2.3. 兼容性
    4. 2.4. 中文支持
  3. 3. 其它相关实现
    1. 3.1. vim-javascript
    2. 3.2. Emacs
  4. 4. 下载、安装和注意事项
    1. 4.1. 下载地址
    2. 4.2. 安装方式
    3. 4.3. 注意事项
  5. 5. 尾声
  6. 6. 感谢
,