0


【面向小白】vscode最佳实践(2)—— 字体设置(fira code+更纱黑体)

〇 前言

  本人本科硕士皆是天坑专业,后自学转行去做了嵌入式软件开发,曾在华为和大疆等公司任职。
  在转行自学的过程中,困难艰辛不必多说,幸运的是得到了网上很多大佬的帮助。现在不敢说小有所成,也算是偶有心得,回顾一路以来的困顿苦恼,决定把自己的一些经验拙见写成博客带给大家,希望能够帮助大家。也欢迎大家积极留言互动问问题,看到消息都会回复的。
  最后,如果觉得文章有用或者能够帮助到你,麻烦点个赞给个关注支持一下,你的点赞关注是对我的最大肯定和支持,也是我不断创作的动力,同时也让我满足一下虚荣心,哈哈~

一 为啥要设置字体

  众所周知,代码的字体真的非常影响心情,而windows默认的宋体也不适合作为代码开发的字体。
  虽然vscode中默认字体Consolas已经比系统默认的好多了,但是仍然属于可用,但是不太好用的地步(个人认为,你杠就是你对)。
  所以本篇给大家推荐我用了很久的带连字符的等宽字体,非常适合编程使用,简直可以用赏心悦目来形容。

二 英文字体设置

  给大家推荐的字体是fira code这款字体,它是一个开源的、带有连字符(ligatures)的等宽字体,由 Nikita Prokopov 创建,为程序员提供更佳的代码阅读和编写体验。
文末有下载!!!
  这个字体的项目在:

https://github.com/tonsky/FiraCode

(如果打不开网址,只能说明你还是比较初级的程序员~)

  字体如下图:
在这里插入图片描述
以及一些比较:
在这里插入图片描述
  从上图可以看出,该字体支持了连字符,比如在代码编写中的双等号可以自动连成一个符号。

  在该项目的页面上可以直接下载安装,选择TTF版本的右键安装即可,如下图。
(如果打不开GitHub,可以看文章最后,附上了字体文件,直接下载)
在这里插入图片描述

三 中文字体

  中文字体我推荐的是更纱黑体,其一款在 100% 缩放比例下有着优秀渲染效果的字体,是极少数做到中文和英文2:1严格对齐的字体,适合用来写代码, 这个字体项目在如下网址,可以在这里进行字体文件的下载。本文末尾也附有该字体文件

https://github.com/be5invis/Sarasa-Gothic/releases

  其显示效果如下:
在这里插入图片描述

  需要注意的是,更纱黑体有非常多的版型,下载项目后解压能有10个G的字体文件,对于我们编程来说是很多都是用不到的,我们只需要下载中文简体的版型即可。即sarasa-sc系列的字体,sc是Simplified Chinese(简体中文的缩写)。我这里推荐Sarasa Mono SC字体。

  想研究具体每个命名的可以参考这个文章:

https://zhuanlan.zhihu.com/p/627059922

  安装方法和上面的相同,下载解压后选择字体,右键安装即可
在这里插入图片描述

四 VSCode 配置

安装好字体后,需要在vscode中正确配置才能使用。

1.设置字体

  1. 点击文件-首选项-设置在这里插入图片描述
  2. 在设置的界面中会有 font family 选项,在该选项的框中填入

‘Fira Code Retina’, ‘Sarasa Mono SC’

如下图:
在这里插入图片描述

2.设置连字符

接着,在搜索框中输入:

fontLigatures

点击在settings.json中编辑
在这里插入图片描述
增加或者修改如下项目:

“editor.fontLigatures”: true

如下图:
在这里插入图片描述
  点击保存即可。
  此时vscode设置完成,可以打开个文件看看对比:

  vscode默认字体配置:
在这里插入图片描述

  更改设置,增加连字后的样子(红色箭头处为连字符开启关闭对比):
在这里插入图片描述

3. 终端字体修改

  理论上来说,按照如上修改,终端中的字体就会和设置的字体一样,但是如果出现不一样的现象,可以手动改回来。
  还是在设置的搜索框中,输入

terminal.integrated.fontFamily

  如下图:
在这里插入图片描述
  若字体和设置不一样,则在框中手动输入:

‘Fira Code Retina’, ‘Sarasa Mono SC’

  若字体已经修改则无需关心。

五 可能遇到的问题

1.安装字体文件后不生效
答:重启一下vscode就可以了

六 字体文件下载

我用夸克网盘分享了「字体文件(fria code+更纱黑体).rar」,点击链接即可保存。
链接:https://pan.quark.cn/s/1481b6e2419e
提取码:htUj

如果帮助到你,麻烦点个赞给个关注,你的支持和关注是我持续更新的动力!谢谢~

标签: vscode ide 编辑器

本文转载自: https://blog.csdn.net/weixin_41096870/article/details/141364928
版权归原作者 一湖酱油 所有, 如有侵权,请联系我们删除。

“【面向小白】vscode最佳实践(2)—— 字体设置(fira code+更纱黑体)”的评论:

还没有评论