【🍚 前端大食堂】Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测,哪款是你的菜 🧀?

4,020 阅读3分钟

Jetbrains Mono 这几天刚刚发布,话不多说,也没什么表情包了,我们来简单评测一下,Jetbrains Mono、FiraCode、Source Code Pro、Consolas哪个才是开发人员的心头好?

一、评测前期准备

鲁迅有云:工欲善其事,必先利其器

Font 资源下载

  1. Jetbrains Mono
  2. FiraCode
  3. Source Code Pro
  4. Consolas

VSCode 设置&插件

由于Jetbrains MonoFiraCode都是具有编程连字的等宽字体,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

Jetbrains Mono

FiraCode

FiraCode

Source Code Pro

Source Code Pro

Consolas

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 ProConsolas不具有连字的功能,所以不幸被笔者排除在外。

连字为什么好?这里引用Jetbrains Mono页面上的一段话:

连字是由两个或多个连接符号组成的字符。传统上,它是作为节省空间的技术引入印刷文本中的。在代码中,此技术用于显示运算符,主要用于两个目的:

  1. 通过合并符号和删除细节来减少噪声,从而减少了眼睛的劳损。
  2. 在某些情况下,通过移动字形可以更有效地平衡空白。

然后,Fira Code看上去觉得没有Jetbrains Mono清晰,看久了眼睛会觉得糊(这个可能也跟后者的优化设计有关,请戳其官网查看特性)。OK,本次测评的冠军诞生啦,它就是Jetbrains Mono!麻烦Jetbrains的工作人员看到这里,请给我打钱💰,我的支付宝账号是157XXXXXXXX ~

当然,除了本文提及的4款字体,当然也有很多其他优秀的字体被大家钟爱,欢迎在评论区留言~

恭贺新禧,新年快乐🎊!