vscode不参与html页面字体渲染，问题根源在浏览器字体栈与系统字体库匹配失败；需检查html编码、font-family声明、字体安装及字符集支持。
VSCode 本身不“运行” HTML，它只是用系统默认浏览器打开文件；字体无法显示，本质是浏览器渲染时找不到可用字体，而非 VSCode 的问题。
浏览器加载的字体来自哪里
当你右键 HTML 文件 → “Open with Live Server” 或直接双击用 Chrome 打开，实际生效的是浏览器的字体栈（font-family）和系统字体库。VSCode 只负责生成 file:// 链接或启动本地服务，不参与页面字体渲染。
常见错误现象包括：
- 中文显示为方块（□）或空白
- 指定的
"JetBrains Mono"字体没生效，回退到默认sans-serif - 页面中
font-family: "Fira Code", monospace;但连字（ligatures）不出现
根本原因只有两个：HTML 中声明的字体名在当前系统未安装，或该字体不支持页面中出现的字符（比如只含英文字形，无中文）。
如何确认字体是否被浏览器真正加载
打开 DevTools（F12）→ Elements 面板 → 选中任意文本元素 → 右侧 Styles 标签页 → 展开 font-family 行，看实际生效的字体名（通常显示为灰色小字，如 "Fira Code", monospace），再点旁边的「Computed」标签，查 font-family 最终值和 font-size 是否合理。
更直接的方式是：在 Console 中执行
getComputedStyle(document.body).fontFamily
返回结果就是当前计算出的字体链。如果看到 "Times New Roman", serif 这类兜底字体，说明你声明的字体全失效了。
排查要点：
- 检查 HTML
中是否漏写<meta charset="UTF-8">—— 缺失会导致中文字符解析失败，间接让字体匹配中断 - 确认字体名拼写与系统安装名完全一致（大小写、空格、引号）；例如 Windows 上
"Microsoft YaHei"有效，但"microsoft yahei"在某些浏览器中会失败 - 用 CSS
@font-face引入的字体，必须确保路径正确、MIME 类型合法、且字体文件本身包含目标字符集（很多编程字体不含中文）
Live Server 响应头影响字体加载吗
不影响字体本身，但会影响中文能否正确解码。Live Server 默认返回 Content-Type: text/html; charset=UTF-8，这是正确的。但如果 HTML 文件实际保存为 GBK 编码，而响应头仍是 UTF-8，浏览器就会把中文当乱码解析，后续字体匹配也失去意义。
验证方式：
- 右下角状态栏点击编码标识（如
UTF-8），选「Reopen with Encoding」→GBK或GB2312测试是否恢复中文 - 若恢复，说明文件编码与响应头不一致；应在 VSCode 中用「Save with Encoding」→
UTF-8重新保存 - 避免依赖
"files.autoGuessEncoding": true，它在混合编码项目中容易误判
为什么改了 VSCode 的 editor.fontFamily 没用
因为那是编辑器里代码的字体，和 HTML 页面渲染完全无关。很多人混淆这两个配置项：
-
editor.fontFamily控制你在 VSCode 编辑窗口里看到的代码字体 -
terminal.integrated.fontFamily控制集成终端的字体 - HTML 页面字体只由页面内
font-familyCSS 规则 + 系统已安装字体决定
如果你在 HTML 中写了 font-family: "Consolas", monospace;，但 Windows 上没装 Consolas（比如某些精简版系统），浏览器就跳过它，继续往后匹配。最终效果取决于整个字体链的 fallback 顺序，而不是某一个名字是否“看起来像对”。
最容易被忽略的一点：字体是否支持 Unicode 范围。比如 Cascadia Code 默认不含中文字符，即使安装了，在显示中文时也会 fallback 到下一个字体——你得手动加一个中文字体到 font-family 链尾，例如 "Cascadia Code", "Microsoft YaHei", sans-serif。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
