神代綺凜

VSCode 等宽字体之坑
想等个宽,我太难了
扫描右侧二维码阅读全文
20
2019/11

VSCode 等宽字体之坑

想等个宽,我太难了

Head Pic: #明日方舟 Mostima - Alcxome的插画 - pixiv
我抽到啦(小声)

VSCode 等宽字体之坑

由于习惯原因我一直是使用 VSCode 写 Markdown 的,并且一直在用 Markdown All in One 插件,有一说一它确实非常好用,特别是这个表格格式化功能让我爱不释手

但我很快发现了一个问题,含有中文的时候这个表格,它对不齐

当时因为我过于年轻,这个问题被不了了之了,直到最近才突然重新出现在我脑袋中,经过一番思索我马上意识到这是字体不等宽导致的问题

那怎么解决?找个等宽字体就好啦?

然而事情并没有那么简单

寻找合适的等宽字体

经过一番搜索,我找到了四款我觉得不错的包含中文的等宽字体,但实际上只有前两款可以在 VSCode 中正常等宽,非常奇怪(终端中只允许使用等宽字体,能用就说明等宽)

Name Used Font Family In VSCode In Terminal
更纱黑体 'Sarasa Mono SC'
M+ FONTS 'M+ 1m'
雅黑等宽 'Microsoft YaHei Mono'
Yasolas Yasolas

后来我在 issue Monospacing broken by Chinese character #14589 中找到了答复,由于 VSCode 是基于 Electron 的,前端由 Chromium 渲染,这种字体渲染问题很可能是 Chromium 导致的,VSCode 侧无能为力

This is an upstream issue (possibly within Chromium), and there are no known workarounds that we could implement on our side. This means there is no possible code change for us to do in VS Code sources to improve things.

但我不想用中英等宽字体写代码

你可以从截图中看出,这些等宽字体会使一个全角字符的宽度严格等于两个半角字符的宽度

他们的宽高比最大只有0.5,这导致半角字符看起来特别“瘦”,拿来写代码……反正我是会瞎的

由于只是在 Markdown 之类的格式下需要使用这类字体,因此我们完全可以独立配置

{
    "[markdown]": {
        "editor.fontFamily": "'Sarasa Mono SC'"
    }
}

这样就不会影响全局的设置了

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
Last modification:November 20th, 2019 at 10:15 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

22 comments

  1. WeiYuan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 70.0(Firefox 70.0)
    headpic 这个画师超爱的。我壁纸也是他的 |´・ω・)ノ
    1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
      @WeiYuan 这种画风太帅了
  2. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
    还是觉得Source Code Pro这款字体不错,虽然不能等宽,但是好看啊
    1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
      @Noob 写代码无所谓啊,哪个好看用哪个,我这个说的是写 markdown
      1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
        @神代綺凜 我写markdown不用vscode写了,看着太难受了,也懒得折腾了,还有你回复真的块
        1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
          @Noob 上班快乐摸鱼
          1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
            @神代綺凜 在自习室看你博客真有趣,顺便问一下大佬,我现在转去学前端了,能给点意见嘛,有什么好的项目嘛,这几天瞎j8写了几个静态网页,感觉自己写的真的烂
            1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
              @Noob 呃,那学学 vue 吧
              1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
                @神代綺凜 现在在学js,因为之前学过java,所以现在学的很快,至于vue,老师说下个学期讲react,到时候react学完再学学vue吧
                1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
                  @Noob 有得教这么好,我那边都只教后端相关的,其它都自学
                  1. WeiYuan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 70.0(Firefox 70.0)
                    @神代綺凜 这个学期期末课设最后一题交了一份jsp写的图书管理系统。
                    老师看完后说:“我批准你下学期Java Web开发课不用来了。”
                    我 :

                    我们学习更惨,这样出去能找到工作吗?
                    (现在在做手机版Vue界面。RESTful后端先拿py写了)

                    1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
                      @WeiYuan 真好啊,我当时 jsp 大作业就随便交了个拿 h5ai UI 改的小网盘,然后上去刚展示了下主界面老师都懒得听了直接让我下去了
  3. gin3715  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
    草,争取第八个六星。。,可以设多个字体fallback吧
  4. Hakula  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 77.0.3865.90(Google Chrome 77.0.3865.90)
    一直用的更纱黑体... 其实习惯了就好
    1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
      @Hakula 习惯不了……
  5. T.O.V  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
  6. 神代夕綺  Mac OS X 10.15.1(Mac OS X 10.15.1) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
    草,福音,我也喜欢 vscode 写 md
  7. Sliots  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 70.0(Firefox 70.0)
    草,MD福音
  8. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.97(Google Chrome 78.0.3904.97)
    草(双语)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
      @风吹名无 草(一种地形,干员布置在上面可以免受敌人攻击)
  9. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.97(Google Chrome 78.0.3904.97)
    强迫症改变世界
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)