本文聚焦于 “CSS 中 normal 的用途详解”，从概念、适用属性到实际的多属性重置场景，系统梳理 normal 作为默认值关键词在前端样式中的作用方式。通过可复现的代码示例，帮助你理解在实际开发中如何利用 normal 实现一致的默认呈现，以及在复杂页面中如何与其他重置方案协同工作。
注意：并非所有 CSS 属性都支持 normal，只有在属性规范中明确规定可用时才可使用。本文以常见的排版与文本相关属性为主，辅以全局与局部重置的对比，帮助读者快速建立对该关键字的直观认知。
在这部分，我们首先明确 normal 的语义，以及它在不同属性中的生效范围。你会发现 normal 等价于默认值或浏览器的初始渲染状态，并且它并不是一个统一的全局开关，而是属性级别的默认值标记。为避免误解，本文将把注意力聚焦在几个最具代表性的属性上：font-style、font-weight、line-height、letter-spacing、white-space 等。
/* normal 作为默认值的典型应用示例 */
p {font-style: normal;font-weight: normal;line-height: normal;letter-spacing: normal;white-space: normal;
}
1.1 1.1 normal 的语义与适用属性
在 CSS 中，normal 的语义是“回到该属性的默认状态”，这对文本呈现影响显著，尤其是在字体风格和行高等方面。它不是一个全局重置工具，而是针对特定属性的默认值标记。通过将某些属性显式设置为 normal，可以避免父级样式对该属性的继续继承或覆盖，确保当前元素的视觉呈现回到统一的基线。
一个直观的应用场景是重置段落文本的样式，确保跨浏览器的一致性，避免因父元素字体风格导致的意外渲染差异。以下要点值得关注：normal 只对支持它的属性有效、在层叠上下文中依然可能受父样式影响、与其他重置策略（如 initial、unset、all）组合时需要谨慎使用。
1.1.1 支持 normal 的常见属性清单
下列属性通常接收 normal 值作为其默认状态的标记：font-style、font-weight、line-height、letter-spacing、word-spacing、white-space。其中 line-height 的 normal 会让浏览器自动计算合适的行高以获得可读性，white-space 则回到普通文本折行与空白处理的默认策略。
/* 常见支持 normal 的属性示例 */
p {font-style: normal;font-weight: normal;line-height: normal;letter-spacing: normal;word-spacing: normal;white-space: normal;
}
2. 多属性应用中的默认值重置实战
2.1 单属性重置：将单个属性回到默认状态
在某些情况下，你只需要把一个属性重置为其默认呈现，而不影响其它属性。此时直接将目标属性设置为 normal，即可避免引入额外的显式数值，从而保持简洁性。这种做法的前提是该属性确实支持 normal，并且你确认父级样式不会对其产生不必要的覆盖。
/* 单属性重置示例：将字体样式重置为默认 */
h1 { font-weight: normal; }
2.2 多属性一次性重置：一次性回到默认状态
在需要统一回到默认文本呈现的场景，一次性把多项属性设为 normal可以快速实现一致性，尤其在微调或重置样式时非常有用。然而，实际效果取决于浏览器默认值与父级样式，因此在全局样式或组件级样式中使用时需结合具体情况测试。
/* 多属性一次性重置示例 */
p {font-style: normal;font-weight: normal;line-height: normal;letter-spacing: normal;white-space: normal;
}
3. 在复杂场景中的默认值重置考量：all、initial、unset 的对比
3.1 all、initial、unset 的用途与差异
除了 normal，CSS 还提供了更广域的重置机制。all 可以将元素的所有可继承与非继承属性重置为初始值；initial 将属性重置为其规格定义的初始值；unset 在继承属性上等于 inherit，在非继承属性上等于 initial。通过对比，可以在全局到局部、简单到复杂的场景中选择最合适的重置方式。
在实际应用中，一些团队选择使用 all: initial 进行全局重置后再逐步覆盖需要的属性，另一些则依赖于单独对关键属性设置 normal 来保证可预测的文本呈现。了解这些差异有助于避免意外布局崩溃或可读性下降。下面的示例展示了常见的对比用法。
/* 全局对比示例 */
* { all: initial; } /* 将所有属性重置为初始值，需要谨慎使用 */
body { all: unset; } /* 继承属性变为 inherit，非继承属性变为 initial */
4. 实战案例：从局部覆盖到全局默认的韧性实践
4.1 使用 CSS 变量实现对 normal 的局部控制
通过引入 CSS 变量，可以在不同区域灵活控制默认状态，而不直接把元素属性全部设为 normal，从而实现更可维护的默认策略。借助变量，局部区域可以覆盖全局默认，同时保持代码的可读性和可维护性。变量驱动的默认控制成为现代组件样式中常见的实战做法。
:root {--default-font-weight: 400;--default-line-height: 1.5;
}
.section-default { font-style: normal; /* 回到全局默认状态 */line-height: normal;
}
.section-custom {--default-font-weight: 600;--default-line-height: 1.8;
}
.section-custom p {font-weight: var(--default-font-weight);line-height: var(--default-line-height);
}
