[{"data":1,"prerenderedAt":208},["ShallowReactive",2],{"navigation":3,"post-\u002Fposts\u002F2025\u002Fchange-font-of-vscode-sidebar":20,"surroundPosts-\u002Fposts\u002F2025\u002Fchange-font-of-vscode-sidebar":195},[4,8,12,16],{"title":5,"path":6,"stem":7},"首页","\u002F","00.index",{"title":9,"path":10,"stem":11},"文章","\u002Fposts","01.posts",{"title":13,"path":14,"stem":15},"动态","\u002Fmoments","02.moments",{"title":17,"path":18,"stem":19},"关于","\u002Fabout","09.about",{"id":21,"title":22,"body":23,"class":175,"cover":176,"coverSize":175,"date":177,"description":178,"draft":179,"extension":180,"hideComments":179,"location":175,"meta":181,"navigation":182,"path":183,"readingTime":184,"seo":189,"sitemap":190,"stem":191,"tags":192,"time":175,"weather":175,"__hash__":194},"posts\u002Fposts\u002F2025\u002F20250107.change-font-of-vscode-sidebar.md","如何修改 VSCode 侧边栏字体",{"type":24,"value":25,"toc":173},"minimark",[26,43,58,62,84,87,90,163,166,169],[27,28,29,30,34,35,42],"p",{},"如果你折腾过 VSCode 自定义字体的话，你应该知道目前 VSCode 只能自定义编辑器以及终端的字体样式，而侧边栏的字体样式是无法自定义的。不过你可以通过 ",[31,32,33],"code",{},"window.zoomLevel"," 来曲线救国实现侧边栏字号的调整，但字体依旧无法设置，关于这个问题的讨论，可以查看这个存在了近十年但仍未解决的 ",[36,37,41],"a",{"href":38,"rel":39},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode\u002Fissues\u002F519",[40],"nofollow","issue#519","。上下文实在太长，有几百个评论，我也没仔细研究其原因。有兴趣的可以研究一下来龙去脉。",[27,44,45,46,51,52,57],{},"经过一顿探寻，发现可以通过 ",[36,47,50],{"href":48,"rel":49},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=drcika.apc-extension",[40],"Apc Customize UI++"," 这个插件来实现侧边栏字体的调整，这个插件可以通过简单的配置来实现。另外还可以通过 ",[36,53,56],{"href":54,"rel":55},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=be5invis.vscode-custom-css",[40],"Custom CSS and JS Loader"," 这个插件来实现，这个可以自定义 CSS 样式，可定制化程度更高，不过没有前者方便。我这里打算使用前者。",[59,60],"post-image",{"filename":61},"01.png",[27,63,64,65,67,68,71,72,77,78,83],{},"遗憾的是，经过尝试，这个 ",[31,66,50],{}," 这个插件目前在 ",[31,69,70],{},"1.93"," 以上的版本中已经无法使用。在相关 ",[36,73,76],{"href":74,"rel":75},"https:\u002F\u002Fgithub.com\u002Fdrcika\u002Fapc-extension\u002Fissues\u002F230#issuecomment-2421377174",[40],"issue#230"," 中发现一个国人开发的可替代的插件：",[36,79,82],{"href":80,"rel":81},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=subframe7536.custom-ui-style",[40],"Custom UI Style","。",[59,85],{"filename":86},"02.png",[27,88,89],{},"对于我这种只需要修改字体的，配制就比较简单了，侵入性也比较小。配置如下：",[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-json shiki shiki-themes material-theme-lighter github-light github-dark","{\n  \"custom-ui-style.font.monospace\": \"Jetbrains Mono\",\n  \"custom-ui-style.font.sansSerif\": \"Jetbrains Mono\"\n}\n","json","",[31,98,99,108,138,157],{"__ignoreMap":96},[100,101,104],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"sP7_E","{\n",[100,109,111,115,119,122,125,129,133,135],{"class":102,"line":110},2,[100,112,114],{"class":113},"s39Yj","  \"",[100,116,118],{"class":117},"sseR_","custom-ui-style.font.monospace",[100,120,121],{"class":113},"\"",[100,123,124],{"class":106},":",[100,126,128],{"class":127},"sjJ54"," \"",[100,130,132],{"class":131},"s_sjI","Jetbrains Mono",[100,134,121],{"class":127},[100,136,137],{"class":106},",\n",[100,139,141,143,146,148,150,152,154],{"class":102,"line":140},3,[100,142,114],{"class":113},[100,144,145],{"class":117},"custom-ui-style.font.sansSerif",[100,147,121],{"class":113},[100,149,124],{"class":106},[100,151,128],{"class":127},[100,153,132],{"class":131},[100,155,156],{"class":127},"\"\n",[100,158,160],{"class":102,"line":159},4,[100,161,162],{"class":106},"}\n",[27,164,165],{},"最后看下整体效果吧：",[59,167],{"filename":168},"03.png",[170,171,172],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sseR_, html code.shiki .sseR_{--shiki-light:#9C3EDA;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":96,"searchDepth":110,"depth":110,"links":174},[],null,"png","2025-01-07","如果你折腾过 VSCode 自定义字体的话，你应该知道目前 VSCode 只能自定义编辑器以及终端的字体样式，而侧边栏的字体样式是无法自定义的。不过你可以通过 window.zoomLevel 来曲线救国实现侧边栏字号的调整，但字体依旧无法设置，关于这个问题的讨论，可以查看这个存在了近十年但仍未解决的 issue#519。上下文实在太长，有几百个评论，我也没仔细研究其原因。有兴趣的可以研究一下来龙去脉。",false,"md",{},true,"\u002Fposts\u002F2025\u002Fchange-font-of-vscode-sidebar",{"text":185,"minutes":186,"time":187,"words":188},"2 min read",1.755,105300,351,{"title":22,"description":178},{"loc":183},"posts\u002F2025\u002F20250107.change-font-of-vscode-sidebar",[193],"技术","6_cHQtBHbF5RA_jswlXNVQQD0TOfXQSPE0WUEkfTWIc",[196,202],{"title":197,"path":198,"stem":199,"date":200,"description":201,"children":-1},"零成本部署！阿里云百炼 + Open WebUI 打造专属 DeepSeek-R1","\u002Fposts\u002F2025\u002Fdeploy-deepseek-r1-for-free","posts\u002F2025\u002F20250211.deploy-deepseek-r1-for-free","2025-02-11","大家好，众所周知，国产之光 DeepSeek 现在的热度远比当时 ChatGPT 出来的时候要火多了。泼天的流量再加上各种恶意攻击，导致 DeepSeek 一直存在性能问题。",{"title":203,"path":204,"stem":205,"date":206,"description":207,"children":-1},"2024 年度总结","\u002Fposts\u002F2025\u002Fend-of-2024","posts\u002F2025\u002F20250102.end-of-2024","2025-01-02","又是一年过去，但 2024 年我可以比较自豪地说，我达成了很多了不起的成就。",1777579131736]