VSCode Markdown预览中文模糊、标点错位、行距塌陷,根本原因是Electron渲染器不自动加载中文字体且不继承编辑器字体设置;需强制配置预览的fontFamily(如Noto Sans CJK SC)、fontSize(15–16)、lineHeight(1.7–1.75),并用UTF-8无BOM的本地CSS文件覆盖样式。

VSCode 的 Markdown 预览默认不嵌入中文字体,直接写中文会 fallback 到系统默认等宽字体(如 Courier New),导致字形发虚、标点错位、行距塌陷——这不是你文件的问题,是渲染链路缺关键一环。
为什么中文预览看起来“糊”或“挤”?
根本原因不是字体没装,而是 VSCode 内置预览用的是 Electron 渲染器,它不会自动加载系统中文字体,也不会继承编辑器的 editor.fontFamily 设置。你看到的“微软雅黑”或“思源黑体”,其实是浏览器兜底的 sans-serif,实际走的是极简 fallback 表。
- 打开开发者工具(
Ctrl+Shift+I→ Console),搜getComputedStyle查document.body的fontFamily,大概率显示"-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"—— 里面根本没有中文字体 - 中文标点(如「」、『』、…、——)在无明确字体声明时容易被缩放或错位,尤其在代码块内更明显
- 默认行高
1.6对西文友好,但对中文段落偏小,易读性下降
必须改的三项设置:fontFamily / fontSize / lineHeight
这些不是“可选优化”,而是中文阅读的底线配置。直接在 VSCode 设置 UI 搜索以下三项,填入合理值:
-
Markdown: Preview Font Family:填"Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif(推荐 Noto,开源免费,覆盖全 Unicode 中日韩汉字) -
Markdown: Preview Font Size:设为15或16(4K 屏建议16,1080p 可用14) -
Markdown: Preview Line Height:设为1.7或1.75(避免中文行间粘连)
改完不用重启,新打开的预览窗口立即生效。注意:这些设置只影响预览,不影响编辑器本身。
导出 PDF 时中文乱码?别碰插件 CSS 文件路径
很多人去改 yzane.markdown-pdf 插件目录下的 styles/default.css,结果升级插件后覆盖丢失,还容易因路径错误白屏。正确做法是:在工作区根目录建 .vscode/markdown-pdf.css,然后在设置里指定:
将 Markdown 格式的回复转换为适合 Telegram 的富文本,避免渲染错误。适用于用户偏好 Markdown 但目标平台为 Telegram 的场景。
"markdown-pdf.styles": ["./.vscode/markdown-pdf.css"]
在这个 CSS 里写死字体族即可:
body { font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif !important; }
- 加
!important是因为插件内联样式优先级高 - 不要用 Google Fonts 等网络字体——PDF 导出是离线 Chromium 渲染,无法联网加载
- Linux 用户若发现 Noto 字体不生效,先确认已安装:
sudo apt install fonts-noto-cjk(Ubuntu/Debian)
高级控制:用本地 CSS 覆盖标题/代码块/列表间距
仅靠设置项调不了细节。比如技术文档需要更大的 h2 间距、代码块加圆角、引用块缩进加深——这时必须上 CSS。
在工作区建 .vscode/markdown.css,填入路径到 markdown.styles 设置项。示例片段:
h2 { margin-top: 1.8em !important; margin-bottom: 0.8em !important; }
pre code { font-family: "JetBrains Mono", "Fira Code", monospace !important; }
blockquote { padding-left: 1.2em; border-left: 3px solid #444; }
- 所有选择器必须带
!important,否则内置样式会覆盖 - 代码块字体建议单独设为等宽字体,和正文字体区分开
- 路径必须相对于工作区根目录,
./.vscode/markdown.css才对,../.vscode/会 404
最常被忽略的一点:CSS 文件编码必须是 UTF-8 无 BOM,否则中文注释或字体名会导致整个样式表失效。

















