如何为网站添加字体大小控制按钮？解决部分文本不生效问题

问题根源 #

你当前的代码只修改了body的字体大小，但页面中部分元素可能设置了**固定像素（px）**的字体大小，这类元素不会继承body的rem字体，所以点击按钮后不会同步放大。

解决方案 #

1. 统一字体单位

把页面所有元素的font-size从固定px改成相对单位（rem或em），比如将font-size:16px改为font-size:1rem（默认1rem=16px）。

2. 优化CSS确保继承生效

/* 全局重置，强制所有元素继承父级字体大小 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: inherit;
}

/* 默认基础字体 */
body {
  font-size: 1rem;
}

/* 放大后的字体样式 */
body.fontsize {
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 1.875rem; /* 对应30px，比3rem更适配多数场景 */
}

3. 优化JavaScript（可选，更规范）

替换内联onclick为事件监听，避免HTML和JS耦合：

<button id="fontSizeBtn">调整字体大小</button>

document.getElementById('fontSizeBtn').addEventListener('click', function() {
  document.body.classList.toggle('fontsize');
});

验证方法 #

如果还有个别文本没放大，检查对应元素的CSS，是否存在!important强制固定字体，或者仍使用px单位，将这些改为相对单位即可。

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