在HTML页面开发过程中，不少开发者会遇到设置了相同字体大小但不同元素显示尺寸不一致的情况，这背后涉及字体单位的选择和CSS继承规则的影响。
常见的HTML字体单位
HTML中设置字体大小的单位有多种，不同单位的计算逻辑差异是导致字体大小不统一的核心原因之一。
绝对单位px
px是像素单位，属于绝对单位，1px对应屏幕的一个像素点，设置后不会随父元素字体大小变化而变化。示例代码如下：
/* 设置段落字体为16px */
p {
font-size: 16px;
}
/* 父元素设置20px，子元素px单位不会受影响 */
.parent {
font-size: 20px;
}
.parent .child {
font-size: 16px; /* 最终还是16px，不会变成20px */
}
相对单位em
em是相对单位，1em等于当前元素的父元素字体大小，如果当前元素没有设置字体大小，会继承父元素的计算值。如果嵌套使用em单位，会出现倍数叠加的问题，示例代码如下：
/* 根元素默认字体16px */
body {
font-size: 16px;
}
/* 父元素设置1.2em，即16*1.2=19.2px */
.parent {
font-size: 1.2em;
}
/* 子元素设置1.2em，即19.2*1.2=23.04px，不是16*1.2 */
.parent .child {
font-size: 1.2em;
}
相对单位rem
rem是相对于根元素<html>的字体大小的单位，不会受父元素字体大小影响，避免了em的嵌套叠加问题，示例代码如下：
/* 根元素设置16px */
html {
font-size: 16px;
}
/* 无论父元素字体多大，1.2rem都是16*1.2=19.2px */
.box {
font-size: 1.2rem;
}
HTML字体继承规则
CSS中部分属性默认会被子元素继承，font-size就是其中之一，继承的规则如下：
- 如果子元素没有显式设置font-size，会继承父元素的计算后字体大小
- 如果父元素使用相对单位，子元素继承的是父元素计算后的具体像素值，而不是相对单位表达式
- 浏览器自带的默认样式会给不同元素设置默认字体大小，比如<h1>默认字体比<p>大，这也是字体不统一的常见原因
字体大小不统一的常见场景与解决
场景1：不同元素默认样式差异
浏览器给标题、段落、列表等元素设置了不同的默认font-size，直接写内容就会出现大小不统一，解决方式是先重置默认样式：
/* 简单重置默认字体大小 */
h1,h2,h3,h4,h5,h6,p,ul,li {
font-size: 16px;
margin: 0;
padding: 0;
}
场景2：混用不同字体单位
部分元素用px，部分用em，部分用rem，会导致最终计算值不一致，建议统一使用rem单位，方便整体调整：
html {
/* 基准值，后续调整只需要改这里 */
font-size: 16px;
}
.text-small {
font-size: 0.875rem; /* 14px */
}
.text-normal {
font-size: 1rem; /* 16px */
}
.text-large {
font-size: 1.125rem; /* 18px */
}
场景3：嵌套使用em单位
多层嵌套时em会不断乘以父元素的字体大小，导致内层字体越来越大，这种情况可以改用rem单位，或者给嵌套元素显式设置font-size覆盖继承值。
总结
HTML字体大小不统一的核心原因是字体单位计算逻辑差异和继承规则的影响，开发时建议统一使用rem作为字体单位，先重置浏览器默认样式，避免混用不同单位，就可以有效避免字体大小不一致的问题。