为何CSS的font属性会移除文本的粗体样式？

先看你的原始代码：

<b>
  <span style="FONT: 20pt &quot;Arial&quot;">
    <strong>bold</strong> not bold <b>bold</b> not bold
  </span>
</b>

这个现象的核心是CSS font 简写属性的规则，具体如下：

核心机制 #

<b> 标签的默认样式是 font-weight: bold，子元素本应继承这个粗体属性，但**font 简写属性会重置未明确声明的字体子属性为初始值**，而非继承父元素的值。

你的 <span> 使用了 font: 20pt "Arial" 简写，只指定了 font-size 和 font-family，没有声明 font-weight，因此浏览器会自动将 <span> 的 font-weight 重置为初始值 normal——这就是为什么 <span> 里的普通文本不是粗体，而 <strong>、<b> 自身自带 font-weight: bold，不受这个重置影响。

当你移除 <span> 后，所有文本直接继承 <b> 的 font-weight: bold，自然全部变粗。

对应你的测试结果解释 #

• 测试1：替换Arial为foo：无论字体是否存在，font 简写的重置规则依然生效，font-weight 保持为 normal，所以效果不变。
• 测试2：调换字号与字体顺序为"Arial 20pt"：font 简写有严格的语法顺序要求——必填项 font-size 必须在 font-family 之前。顺序颠倒后，整个 font 声明被判定无效，<span> 继承外层 <b> 的 bold 属性，所有文本变粗，同时字号设置失效。
• 测试3：单独设置字体或字号：单独使用 font-family 或 font-size 属性时，只会修改对应单个属性，不会触动 font-weight，因此 <span> 依然继承父元素的 bold，所有文本显示为粗体。

内容的提问来源于stack exchange，提问作者student91