编辑器字体大小与网页渲染字体完全无关：前者是开发环境ui设置，需在平台设置面板（如codepen左下角“editor settings”）中调整；后者由css中font-size声明控制，二者解耦。
编辑器里改字体大小，不是改网页渲染效果
HTML在线运行平台（如 JSBin、CodePen、JSFiddle）的代码编辑区字体大小，和最终网页中 <p></p> 或 <h1></h1> 的字体大小完全无关。前者是开发环境 UI 设置，后者是 CSS 渲染结果。很多人调了半天 font-size: 20px 却发现编辑器文字没变——因为那根本不是同一个东西。
常见错误现象：在 CodePen 的 CSS 栏写了 body { font-size: 18px; }，以为能放大编辑器里的代码字体；或者误点“预览窗口”的缩放，结果只是浏览器页面缩放，不改变编辑器本身。
- 编辑器字体大小必须在平台自身的设置面板里调，通常叫 “Editor Font Size”、“Code Font Size” 或带齿轮图标的 “Settings”
- 部分平台（如 JSFiddle）需点击右上角
⚙️→ “Editor settings” → 拖动 “Font size” 滑块 - CodePen 在左下角有
⋯菜单 → “Editor Settings” → 找 “Font Size” 输入框，支持输入数字（如14、16），单位是 px，不写单位也默认为 px - 某些平台（如 Replit 的 HTML 模板）依赖系统级设置：修改浏览器的默认等宽字体（如
monospace字体族），会影响所有基于 Monaco/Fira Code 等字体的编辑器显示
为什么改了编辑器字体，预览区文字没变？
这是设计使然，不是 bug。编辑器控制的是你写代码时的可读性，预览区渲染的是你写的 HTML/CSS/JS 输出结果。二者完全解耦。
例如你在 CodePen 编辑器把字体调到 20px，这只是让 div { font-size: 1rem; } 这行字看起来更大，但预览区里那个 <div> 的实际尺寸仍由你写的 CSS 决定——如果没写任何 <code>font-size，它就按浏览器默认（通常是 16px）渲染。
- 预览区文字大小只响应你写的 CSS 中的
font-size声明，和编辑器设置零关系 - 若预览区文字意外变小，优先检查是否写了
html { font-size: 12px; }或父容器设置了极小的font-size导致em/rem计算塌缩 - 别用
zoom: 1.2或transform: scale(1.2)去“放大预览”，这会破坏布局语义和可访问性
想让预览区文字随编辑器缩放联动？别这么做
没有标准方案，也不该有。强行绑定会导致不可控副作用：比如你放大编辑器到 24px，预览区也跟着放大，但此时 1rem 对应的像素值就乱了，媒体查询错位、第三方组件样式崩坏、打印输出异常。
真正需要的是分离关注点：编辑器字体服务于编码效率，预览区字体服务于用户阅读体验和响应式逻辑。
- 编辑器字体建议设在
14–16px区间：太小伤眼，太大浪费垂直空间 - 预览区字体应通过 CSS 控制，优先用
rem，初始设html { font-size: 16px; }，再配合clamp()或媒体查询适配不同设备 - 如果真要动态调节预览区字号（如无障碍需求），必须走
document.documentElement.style.fontSize，而不是动编辑器设置
哪些平台支持保存编辑器字体偏好？
多数现代在线编辑器会将字体大小存在本地存储（localStorage）或账户设置中，但行为不一致。
- CodePen：登录后设置会同步到账号，换设备登录仍生效；未登录则仅存于当前浏览器
- JSBin：设置保存在
localStorage，关掉标签页不丢失，但清除站点数据后重置 - JSFiddle：设置不持久，每次打开新 fiddle 都恢复默认（
13px），需手动重调 - 注意：有些平台（如早期版 RunJS）把字体大小写进 URL 参数（如
?fontSize=16），分享链接时会一并传递，但非主流做法
复杂点在于：不同平台对“字体大小”的定义粒度不同——有的调的是 font-size，有的连带调整行高（line-height）和字间距（letter-spacing），这些细节通常藏在高级设置里，容易被忽略。
