VSCode如何设置中文Markdown预览？配置中文字体渲染【秘籍】-VSCode-PHP中文网

vscode markdown预览中文模糊、标点错位、行距塌陷，根本原因是electron渲染器不自动加载中文字体且不继承编辑器字体设置；需强制配置预览的fontfamily（如noto sans cjk sc）、fontsize（15–16）、lineheight（1.7–1.75），并用utf-8无bom的本地css文件覆盖样式。

vscode如何设置中文markdown预览？配置中文字体渲染【秘籍】

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，然后在设置里指定：

Telegram Markdown Adapter

将 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; }