VSCode Markdown预览默认不支持中文渲染,因内置markdown.css字体栈缺失中文字体;需在settings.json中配置"markdown.preview.fontFamily"添加"Microsoft YaHei"等字体,保存后右键Open Preview to the Side即可生效。

VSCode 的 Markdown 预览默认不支持中文渲染?
不是不支持,而是预览样式默认用的是 VSCode 内置的 markdown.css,字体栈里没包含常见中文字体(比如 "Microsoft YaHei"、"PingFang SC"、"Noto Sans CJK SC"),导致中文显示为方块或 fallback 到极小字号。这不是编码或语法问题,纯属 CSS 字体配置缺失。
修改 settings.json 添加中文字体支持
直接改用户级设置即可生效,无需插件。关键字段是 markdown.preview.fontFamily,它会覆盖预览页的 body 字体声明:
- 打开命令面板(
Ctrl+Shift+P/Cmd+Shift+P),输入Preferences: Open Settings (JSON) - 在
settings.json中添加或修改这一行:"markdown.preview.fontFamily": "\"Microsoft YaHei\", \"PingFang SC\", \"Noto Sans CJK SC\", sans-serif"
- 保存后,重新打开任意
.md文件,右键 →Open Preview to the Side即可看到效果
注意:字体名含空格或特殊字符必须用双引号包裹;Windows 建议优先放 "Microsoft YaHei",macOS 放 "PingFang SC",Linux 可用 "Noto Sans CJK SC" 或 "WenQuanYi Micro Hei"。
预览样式被重置或字体仍不生效?检查这些点
常见干扰源比想象中多,尤其当你装过 Markdown 插件(如 Markdown All in One)或自定义过 style.less:
-
markdown.preview.fontSize如果设得太小(如10),中文会糊成一片——建议设为14或16 - 某些主题(如
Nord)会强制重写预览 CSS,可临时切换回Default Dark+排查 - 如果用了
markdown.extension.grammarly或其他语法增强插件,它们可能注入自己的样式表,禁用后测试是否恢复 - VSCode 1.85+ 版本起,
markdown.preview.breakOnSingleNewLine默认为false,但这不影响字体,只是换行行为变化,别误判
想彻底自定义预览样式?用 markdown.styles 引入本地 CSS
比改字体更进一步的控制方式:写一个最小化 CSS 文件,然后让 VSCode 加载它。适合需要调整行高、代码块背景、标题缩进等场景:
- 新建文件
~/my-md-preview.css(路径随意,但推荐放在用户目录下) - 内容示例:
body { font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; line-height: 1.6; } - 在
settings.json中添加:"markdown.styles": ["file:///Users/yourname/my-md-preview.css"]
(Windows 路径用file:///C:/Users/yourname/my-md-preview.css) - 注意:URL 必须是绝对路径且以
file://开头,否则加载失败,控制台会报Failed to load resource
这个方案灵活,但也意味着每次更新都要手动维护 CSS 文件——多数人只改 fontFamily 就够了。


















