VS Code编辑器字体大小与网页渲染字体大小无关：前者通过Ctrl+/Cmd+=或设置editor.fontSize调整代码显示大小，后者需用CSS的font-size、rem等控制浏览器中网页实际显示效果。
VS Code 编辑器里改网页字体大小，不是改 HTML 的 font-size
很多人搜“vscode制作网页怎么改变字体大小”，实际想的是：写 HTML/CSS 时，编辑器里文字太小看不清，或者预览网页时字体太小。这两者完全无关——前者是 VS Code 自身的 UI 字体设置，后者才是网页代码控制的渲染效果。先确认你卡在哪一步。
改 VS Code 编辑器里的代码字体大小（写代码时看得清）
这是最常被混淆的点。VS Code 默认字体偏小，尤其高分屏上更吃力。它和你的网页运行效果毫无关系，只影响你写 index.html 或 style.css 时的阅读体验。
- 快捷键直接调：
Ctrl + =（Windows/Linux）或Cmd + =（Mac）放大；Ctrl + -或Cmd + -缩小 - 永久生效：打开设置（
Ctrl + ,），搜editor.fontSize，改数值（比如从12改成14） - 别碰
window.zoomLevel：它会放大整个 UI（菜单、侧边栏），导致布局错位，只调editor.fontSize更稳
改网页在浏览器里显示的字体大小（用 CSS 控制）
你在 VS Code 里写完 index.html，用 Live Server 启动后看到字体小，问题出在 CSS 没设或设得不合理。浏览器默认根字体是 16px，但很多 CSS 重置库（比如 normalize.css）或框架（如 Tailwind）会改掉它。
- 最简方式：在
style.css里加一句body { font-size: 18px; }，立刻生效 - 更灵活：用
rem单位，先设html { font-size: 16px; }，再用h1 { font-size: 1.5rem; }，方便后期统一缩放 - 别只改
h1、p：如果用了第三方组件库（如 Bootstrap），它的字体可能由内部 CSS 覆盖，得用浏览器开发者工具（F12）检查真实生效的样式
Live Server 预览时字体异常小？检查是否开了缩放或用了错误单位
有时候明明写了 font-size: 20px，预览却小得离谱。常见原因不是代码错，而是环境干扰。
- 浏览器本身被缩放了：按
Ctrl + 0（Mac 是Cmd + 0）重置为 100%，排除误触 - CSS 写了
em却没理清继承链：比如父元素font-size: 0.8em，子元素再写1.2em，实际是16px × 0.8 × 1.2 = 15.36px，远小于预期 - 用了
vw/vh单位但窗口太窄：比如font-size: 4vw，在 800px 宽屏幕下只有32px，但调试时开着 VS Code 和浏览器并排，实际可视宽度可能只剩 500px，结果变成20px，看起来就小
字体这事，编辑器设置、CSS 规则、浏览器状态三者各管一摊，混在一起调只会越调越乱。盯住你此刻真正想改的是哪一层，其他先不动。
