首页 > 文章 > 前端

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

时间：2026-02-25 20:37:16 166浏览收藏

本文系统讲解了在HTML中实现不同字号的三种核心CSS方法——内联样式、内部样式表和外部样式表，并强调所有字号控制均依赖`font-size`属性，而非HTML标签本身；文章指出浏览器默认样式仅为参考，实际显示完全由CSS规则决定，同时深入剖析了px、em、rem、%等单位的适用场景与潜在陷阱，特别推荐以rem构建可访问、响应式的字体缩放体系，辅以类名复用和开发者工具调试，帮助开发者避免继承混乱、单位混用等常见问题，提升代码可维护性与用户体验。

如何设置html中的字号大小不一样

用 `font-size` 控制不同文字的字号

HTML 本身不直接提供“设置字号大小不一样”的标签，所有字号差异都靠 CSS 的 font-size 属性实现。浏览器默认对 h1～h6、p、span 等元素有基础样式，但它们的字号不是固定写死的，而是由当前生效的 CSS 规则决定。

实操建议：

优先用类名（class）而不是内联 style，方便复用和维护
font-size 支持多种单位：px（绝对像素）、em（相对于父元素）、rem（相对于根元素 html）、%（百分比），推荐新手从 rem 入手，兼顾可访问性和响应性
避免混用 px 和 em 在同一层级，容易因继承关系导致字号意外放大或缩小

为什么不行了

是 HTML 3.2 的遗留标签，在 HTML5 中已被完全废弃。现代浏览器虽可能渲染它，但不保证行为一致，且会被 Lighthouse、W3C 验证器标为错误。

常见错误现象：

在 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 及更早版本不支持，但这类环境现在极少需要兼容。