如何仅修改网页普通文本字号（EM单位）而不影响标题？

em是相对父元素字体大小计算的单位，你给body设置font-size: 1.2em后，浏览器默认的标题字号（比如h1默认2em）会基于body的1.2em再放大，最终变成1.2em * 2 = 2.4em，这就是标题字号跟着变大的原因。而用inherit会让标题直接继承body的1.2em，自然和正文字号一致，失去层级区分。

给你两个实用的解决思路：

思路1：用em保持标题与正文的比例关系 #

如果你希望标题和正文保持固定比例，同时跟着body的字号缩放，直接给标题设置相对于body的em倍数即可：

body {
  font-size: 1.2em;
}
h1 {
  font-size: 2em; /* 字号是正文的2倍，最终为2.4em */
}
h2 {
  font-size: 1.5em; /* 正文的1.5倍，最终1.8em */
}
h3 {
  font-size: 1.2em; /* 正文的1.2倍，最终1.44em */
}

这样body字号调整时，标题会按比例同步缩放，同时保持层级差异。

思路2：用rem让标题大小与body解耦 #

如果想让标题大小不受body的1.2em影响，保持基于浏览器基准字号（通常16px）的固定大小，改用rem单位（相对于根元素html的字号）：

body {
  font-size: 1.2em;
}
h1 {
  font-size: 2rem; /* 对应32px，不受body设置影响 */
}
h2 {
  font-size: 1.5rem; /* 对应24px */
}
h3 {
  font-size: 1.25rem; /* 对应20px */
}

这种方式下，标题大小固定，仅正文跟着body的设置缩放，适合标题需要稳定字号的场景。

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