字体大小不一致是因浏览器默认样式和CSS继承规则影响，如h1、small等标签有内置大小，表单元素可能不继承父级字体。font-size虽可继承，但默认样式或绝对单位（px）会覆盖继承，导致显示差异。解决方法包括使用CSS重置或normalize消除默认样式差异，显式设置关键容器字体大小，采用rem/em相对单位，并通过开发者工具检查实际继承情况。例如div内h3仍显20px是因浏览器重置，需手动设为14px以统一。根本原因在于默认样式干扰继承机制。
HTML中字体大小看起来不统一，通常不是因为插入字体的问题，而是CSS的继承规则和浏览器默认样式共同作用的结果。元素之间的字体大小差异，往往源于某些标签本身具有默认样式，或未正确继承父级字体设置。
字体大小为什么会不一致？
不同HTML标签在浏览器中有各自的默认字体大小。比如：
- h1 默认比 p 大
- small 标签会缩小字体
- button、input 等表单元素可能不继承父级字体
即使你设置了父容器的字体大小，子元素未必完全继承，尤其是表单控件或标题类标签。
CSS字体继承机制
CSS中，font-size 是可继承属性，意味着大多数子元素会自动使用父元素的字体大小。但以下情况例外：
立即学习“前端免费学习笔记（深入）”；
- 某些元素有浏览器内置样式，覆盖了继承值
- 使用了绝对单位（如 px）定义大小，阻断相对计算
- 设置了initial 或 unset，改变了继承行为
例如：一个 div 设置了 font-size: 16px，其内部的 h1 仍可能显示为 32px，因为浏览器重置了标题标签的大小。
如何统一字体大小？
要实现统一视觉效果，建议采取以下措施：
- 使用CSS重置（reset）或标准化（normalize）样式表，消除浏览器默认差异
- 对关键容器显式设置 font-size，并确保子元素未被其他规则覆盖
- 使用相对单位（如 em 或 rem）增强可维护性和一致性
- 检查开发者工具，查看具体元素是否真正继承了期望的字体大小
常见问题示例
比如你写了这段代码：
这段文字是14px
这个标题可能更大
尽管父级设为14px，h3 可能因浏览器默认样式显示为20px以上。解决方法是：
div h3 {
font-size: 14px; /* 显式设置 */
}
基本上就这些。字体大小不统一，本质是继承被干扰或默认样式作祟。理清继承逻辑，统一设置，问题就能解决。
