首页 > 文章 > 前端

HTML如何调整字体大小？

时间：2026-03-23 10:20:31 412浏览收藏

本文详解了在HTML中实现不同字号大小的正确方法——完全依赖CSS的font-size属性，摒弃已废弃的标签和混乱的内联样式；重点推荐以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 及更早版本不支持，但这类环境现在极少需要兼容。