如何将全站字体大小整体放大至110%？（CSS类已设静态font-size值）

嘿，这个场景我太熟悉了——维护老项目时到处都是写死的font-size: Xpx，想整体调整字体大小简直头疼！给你几个实用的方案，按需选择：

方案一：全局替换为CSS变量（最优雅，适合长期维护） #

如果你的项目允许修改现有CSS代码，这是最优解：

1. 先在根元素定义一个缩放变量：

:root {
  --font-scale: 1.1; /* 这里控制缩放比例，1.1就是110% */
}

2. 全局替换所有静态font-size值，把font-size: Xpx改成font-size: calc(var(--font-scale) * Xpx)。比如：

• 原来的.title { font-size: 16px; } → 改成.title { font-size: calc(var(--font-scale) * 16px); }
• 原来的.text { font-size: 14px; } → 改成.text { font-size: calc(var(--font-scale) * 14px); }

这样以后想调整字体大小，只要修改--font-scale的值就行，不用逐个改px，非常灵活。

方案二：用JavaScript批量修改（无需改CSS，适合临时需求） #

如果不想碰现有CSS，可以用JS遍历所有元素，动态计算并修改字体大小：

// 遍历页面所有元素
document.querySelectorAll('*').forEach(element => {
  // 获取元素计算后的字体大小
  const computedFontSize = window.getComputedStyle(element).fontSize;
  // 转成数字（去掉px单位）
  const fontSizeNum = parseFloat(computedFontSize);
  
  // 有效数值才修改
  if (!isNaN(fontSizeNum)) {
    element.style.fontSize = `${fontSizeNum * 1.1}px`;
  }
});

💡 注意：这个方法会给元素添加内联样式，可能会覆盖原有的内联font-size；如果页面元素特别多，可能有轻微性能影响，但一般项目完全没问题。

方案三：用zoom/scale快速缩放（适合临时测试，不推荐生产） #

如果只是快速预览放大效果，可以给根元素设置缩放：

html {
  /* Chrome/Edge/IE支持 */
  zoom: 1.1;
  /* Firefox兼容 */
  -moz-transform: scale(1.1);
  -moz-transform-origin: top left;
}

⚠️ 缺点：这个会缩放整个页面元素（包括宽高、间距、图片等），不是只放大字体，可能导致布局错乱，所以只适合临时测试，不建议在生产环境使用。

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