HTML设置不同字号的三种方法详解

常见错误现象：

• 在 Chrome 或 Firefox 中看似有效，但在 Safari 某些版本里失效
• 用 size="3" 这类数字值时，实际映射关系模糊（比如 size="1" 不等于 1px），不同浏览器解释不同
• 与 CSS 的 font-size 同时存在时，层叠优先级混乱，调试困难

怎样让标题和正文字号自然拉开层次

单纯写 h1 { font-size: 28px; } 和 p { font-size: 16px; } 很容易陷入“数值硬编码”陷阱——一旦设计稿调整字号比例，就得逐个改。

更稳妥的做法是建立相对缩放体系：

• 先在 html 标签上设基准：例如 html { font-size: 16px; }（这是多数浏览器默认值）
• 然后用 rem 定义各级标题：h1 { font-size: 2.5rem; } → 实际 40px；p { font-size: 1rem; } → 实际 16px
• 如果需要适配小屏，只需改 html 的 font-size（如媒体查询中设为 14px），整站字号自动等比缩小

注意：rem 对 IE9+ 有效，IE8 及更早版本不支持，但这类环境现在极少需要兼容。

遇到 font-size 不生效？先查这三件事

最常被忽略的是 CSS 层叠和继承干扰，而不是写法本身错。

• 检查是否被更高优先级的选择器覆盖（比如 body p 比 p 优先级高）
• 确认元素是否被设置了 font-size: inherit 或 font-size: unset，导致它“听话”地继承了父级字号
• 用浏览器开发者工具的“Computed”面板看最终生效的 font-size 值，并点开来源链接，定位是哪条规则在起作用

一个典型坑：给 button 设 font-size: 14px 没反应？可能是浏览器默认样式表里 button 的 font 属性整体覆盖了单独的 font-size，此时要重置整个 font 或加 !important（仅限调试，上线前应理清层叠逻辑）。

字号差异这事，表面是数值大小，背后其实是单位选择、继承链、选择器权重三者的实时博弈。调不出来时，别急着改数字，先打开开发者工具看“真正生效的是哪一行”。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。