神代綺凛

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折优惠码BWH3HYATVBJW
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
季付$47CN2 GIA线路,1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买
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 Cancel reply

39 comments

  1. 小朋友  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 107.0.0.0(Google Chrome 107.0.0.0)
    看了评论选择了Ubuntu Mono,感谢作者帮我解决markdown等宽问题,作者大大好棒
  2. 魍酃  GNU/Linux x64(GNU/Linux x64) / Google Chrome 80.0.3987.162(Google Chrome 80.0.3987.162)
    同一个世界,同一个插件,同一种强迫症,同样的等宽字体无效让我来到了这里
  3. 小珺子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 83.0.4103.97(Google Chrome 83.0.4103.97)
    十分感谢,用了这个字体后,强迫症终于不用那么难受了
  4. xianii  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 83.0.4103.61(Google Chrome 83.0.4103.61)
    一直在用Sarasa,习惯了就好了。一开始也是因为md表格对齐的问题去找的。
  5. 九子哥  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 81.0.4044.138(Google Chrome 81.0.4044.138)
    你咋这么优秀,一定要给你发鸡腿
  6. 华灯  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 81.0.4044.138(Google Chrome 81.0.4044.138)
    OωO 博主你怎么那么棒呢?
  7. Cloud  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 81.0.4044.138(Google Chrome 81.0.4044.138)
    用Ubuntu Mono,好看又等宽୧(๑•̀⌄•́๑)૭
  8. Tianyi  Mac OS X 10.15(Mac OS X 10.15) / Safari 13.0.2(Safari 13.0.2)
    帮大忙了,我也看不爽对不齐的表格【捂脸】
    1. 神代綺凜  Mac OS X 10.15.4(Mac OS X 10.15.4) / Google Chrome 80.0.3987.163(Google Chrome 80.0.3987.163)
  9. krau  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 80.0.3987.162(Google Chrome 80.0.3987.162)
    表格在写的时候为什么一定要对齐呢,最后生成的表格又不会歪(
    强迫症为了看着舒服点吗hhhh
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 80.0.3987.149(Google Chrome 80.0.3987.149)
      @krau 那必须 不然都没心情写(
  10. 冰彦糖  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 81.0.4003.0(Google Chrome 81.0.4003.0)
    划划水,想问问服务器带宽很低向那个方向优化打开快点,。。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 79.0.3945.88(Google Chrome 79.0.3945.88)
      1. 冰彦糖  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 81.0.4003.0(Google Chrome 81.0.4003.0)
        @神代綺凜 现在再用腾讯云CDN,发现还是挺慢的,有时候甚至不如直连。
  11. Leon  Mac OS X 10.15.2(Mac OS X 10.15.2) / Safari 13.0.4(Safari 13.0.4)
    我发现了这个问题,但是缺少你这个markdown设置的方法,最后的mardown专用的设置是写在哪里呢
    1. Tianyi  Mac OS X 10.15(Mac OS X 10.15) / Safari 13.0.2(Safari 13.0.2)
      @Leon 或者右下角点击"Markdown"然后选择"Configure 'markdown' language based settings"
    2. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 79.0.3945.88(Google Chrome 79.0.3945.88)
      @Leon 按下 F1,输入setting,有个“打开设置(JSON)”
  12. 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 这种画风太帅了
  13. 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 改的小网盘,然后上去刚展示了下主界面老师都懒得听了直接让我下去了
  14. gin3715  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
    草,争取第八个六星。。,可以设多个字体fallback吧
  15. 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 习惯不了……
  16. T.O.V  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
  17. 神代夕綺  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
  18. Sliots  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 70.0(Firefox 70.0)
    草,MD福音
  19. 风吹名无  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)
      @风吹名无 草(一种地形,干员布置在上面可以免受敌人攻击)
  20. 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)