能否在Chrome DevTools中临时修改浏览器默认字号（非缩放）？

方法1：通过DevTools渲染面板模拟浏览器字号 #

• 打开Chrome DevTools（快捷键F12或Ctrl+Shift+I）
• 点击右上角三点图标 → 更多工具 → 渲染（Rendering）
• 在渲染面板的**“模拟页面设置”区域，勾选“字体大小”**，从下拉菜单选择预设字号（如“大”“特大”），或输入自定义百分比。
• 该设置仅作用于当前标签页，关闭DevTools后仍会保留，直到手动取消勾选。

方法2：动态修改:root字号配合控制台脚本 #

由于你已设置:root {font-size: 10px}，可通过控制台快速调整来模拟浏览器字号缩放效果：

• 打开控制台（Console）面板
• 执行以下脚本（可保存为代码片段重复使用）：

  // 模拟浏览器字号放大20%（对应Chrome“大”字号）
  document.documentElement.style.fontSize = "12px";
  // 恢复默认设置
  document.documentElement.style.fontSize = "10px";
  

• 更灵活的百分比控制脚本：

  function adjustRootFontSize(scale) {
    const baseSize = 10;
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
  }
  // 示例：放大1.2倍
  adjustRootFontSize(1.2);
  

补充：页面缩放与浏览器字号的区别 #

页面缩放（Ctrl+/Ctrl-）是对整个页面像素进行等比例缩放，会同时改变元素尺寸、图片大小等；而浏览器字号缩放仅调整页面文字的基准字号，依赖rem等相对单位的元素会随之适配，固定px的文字也会按浏览器设置放大，更贴近用户实际的系统字号偏好场景。

内容的提问来源于stack exchange，提问作者Nick Annenkov