? Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测，哪款是你的菜？
? Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测，哪款是你的菜？
5
? Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测，哪款是你的菜？
云中的猫发布于 2020-01-16
Jetbrains Mono 这几天刚刚发布，话不多说，也没什么表情包了，我们来简单评测一下，Jetbrains Mono、FiraCode、Source Code Pro、Consolas哪个才是开发人员的心头好?
一、评测前期准备
鲁迅有云：工欲善其事，必先利其器
Font 资源下载
- Jetbrains Mono
- [官方网站](https://www.jetbrains.com/lp/mono/) / [下载](https://download.jetbrains.com/fonts/JetBrainsMono-1.0.0.zip)（Jetbrains自带）- [官方仓库](https://github.com/tonsky/FiraCode) / [下载](https://fonts.google.com/specimen/Fira+Code) - [官方仓库](https://github.com/adobe-fonts/source-code-pro) / [下载](https://fonts.google.com/specimen/Source+Code+Pro) - [MS介绍](https://docs.microsoft.com/en-us/typography/font-list/consolas) / [下载](https://www.fonts.com/font/microsoft-corporation/consolas)（VSCode自带）VsCode 设置
由于Jetbrains Mono、FiraCode都是具有编程连字的等宽字体，VSCode要启用连字特性还需要做一些设置，同时为了方便评测也用到了Font Switcher插件，请提前安装好这个插件哦！
首先，我们通过 preference/settings 打开设置页面，进行快捷操作，也可以直接编辑setting.json文件，如下：
// settings.json
{
// ...
"editor.fontLigatures": true, // 是否启用字体连字
"editor.fontSize": 14, //设置字体大小
"editor.fontWeight": "normal", //设置字体粗细
"editor.fontFamily": "'Jetbrains Mono'",
"font-switcher.enableLivePreview": true,
"font-switcher.fontFamily": "'Jetbrains Mono','Fira Code', 'Source Code Pro', Consolas, 'Courier New', monospace",
}Ctrl+Shift+P 打开命令面板，键入Switch Font，然后就可以肆意地切换字体啦?！
二、测评开始
笔者信奉“一图胜千言”，“一千个人心里有一千个哈姆雷特”，我们先来看各个字体的实际效果吧！ps：由于笔者是前端开发小菜鸟，于是下文会以Vue的模板代码来作为测评基准
Jetbrains Mono
FiraCode
Source Code Pro
Consolas
本次测评使用的代码模板 Code Template
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
},
methods: {
/**
* ABCDEFG abcdefg
* 1234567890 这是一段评测文本
*/
foo: (name, age) => {
name = name == "Foo" ? "A real foo" : "Are you ok?";
return age >= 35 ? "淘汰" : "996";
}
}
};
</script>笔者不成熟的小总结
作为一枚不成熟的前端开发，深知我敲的每一行不是代码，是Bug！呸，是艺术和禅学！
而一款优秀的字体能够帮助我们形成整洁的卷面，以后要是有产品经理过来找Bug，我们至少拿到了卷面分不是~
对于笔者而言，首先做排除法，由于Source Code Pro和Consolas不具有连字的功能，所以不幸被笔者排除在外。
连字为什么好？这里引用Jetbrains Mono页面上的一段话：
连字是由两个或多个连接符号组成的字符。传统上，它是作为节省空间的技术引入印刷文本中的。在代码中，此技术用于显示运算符，主要用于两个目的：
- 通过合并符号和删除细节来减少噪声，从而减少了对眼睛的劳损。
- 在某些情况下，通过移动字形可以更有效地平衡空白。
然后，Fira Code看上去觉得没有Jetbrains Mono清晰，看久了眼睛会觉得糊（这个可能也跟后者的优化设计有关，请戳其官网查看特性）。OK，本次测评的冠军诞生啦，它就是Jetbrains Mono！麻烦Jetbrains的工作人员看到这里，请给我打钱?，我的支付宝账号是157XXXXXXXX ~
当然，除了本文提及的4款字体，当然也有很多其他优秀的字体被大家钟爱，欢迎在评论区留言~
恭贺新禧，新年快乐?!