怎样设置网页的默认字号_BODY标签的STYLE属性控制-html教程-PHP中文网

直接在标签用style设字号虽能生效但不推荐，因它绕过css层叠与继承，导致h1-h6、表单控件继承异常，响应式和暗色模式难适配，且干扰rem基准。

怎样设置网页的默认字号_body标签的style属性控制

直接在标签上用 style 属性设字号（比如 style="font-size: 16px;"）能生效，但不推荐用于正式项目——它绕过了 CSS 层叠和继承机制，后续调整、适配响应式或暗色模式时会卡住。

为什么 `body` 的内联 `font-size` 容易出问题

浏览器渲染时，确实会让子元素（如 <p></p>）按这个值继承，但以下情况会失效或反直觉：

<h1></h1> 到 <h6></h6> 默认是 em 或 rem 倍数，比如 h1 { font-size: 2em; }，此时它基于的是根元素（）的字号，不是的——内联设在 body 上对它们基本没影响
表单控件（<input>、<select></select>）在多数浏览器里不继承 body 的 font-size，它们有自己的 UA 样式，优先级更高
媒体查询中无法单独覆盖内联样式，必须加 !important，污染性极强
如果页面用了 rem 布局，根字号通常设在上，body 内联字号反而造成基准混乱

`font-size` 放在 `<style></style>` 块里更可控

把字号声明移到里的 <style></style>，能确保被所有后代元素（包括表单）更稳定地继承，也方便后续覆盖：

Facet

一款结合AI图像生成与编辑能力的视觉创作工具，支持对图片进行生成、修改和迭代，适合创意设计工作。

下载

  <style>
    body {
      font-size: 16px;
      line-height: 1.5;
    }
    /* 强制表单继承 */
    input, select, textarea {
      font: inherit;
    }
  </style>

用 font: inherit 而不是只写 font-size: inherit，因为表单控件需要同时继承字号、字重、字体族
如果目标是响应式字号，别硬写死 16px，改用 1rem 并在上统一控制根字号
注意：Chrome 和 Safari 对 font: inherit 在 <button></button> 上的支持稍弱，必要时单独补一句 button { font-size: 100%; }

真正影响全局字号的其实是元素

现代网页中，才是 rem 的计算基准。设在这里，才能一揽子控制所有相对单位：

<style>
  html {
    font-size: 16px; /* 基准 */
  }
  @media (max-width: 768px) {
    html {
      font-size: 14px; /* 小屏缩一点 */
    }
  }
  body {
    font-size: 1rem; /* 此时就是 16px 或 14px */
  }
</style>