为何字体CSS属性会取消粗体字重？

Question

我被要求从计算机生成的HTML中删除不必要的标签，该HTML中有很多无用的标签（我只想保留颜色/strong/em信息）。我遇到了类似于以下HTML的内容：

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

对于我来说（在chrome和firefox上），它将bold文本显示为粗体，将not bold文本显示为非粗体，我对此感到困惑。特别是，这使得我的任务变得更加复杂：我原以为我可以只删除没有颜色/strong/em信息的标签，所以将其更改为以下内容：

<b>
   <strong>bold</strong> not bold <strong>bold</strong> not bold
</b>

但是现在，所有的文本都变成了粗体，而不是以前的样子。

我试图找出我可以在FONT样式中放入什么来重现这种行为：

将Arial替换为foo保持了这种行为：

<b>
  <span style="FONT: 20pt foo">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- not bold is actually not bold! 20pt is applied -->
  </span>
</b>

将大小和字体切换后，行为发生了变化：

<b>
  <span style="FONT: "Arial" 20pt">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold. 20pt is _not_ applied -->
  </span>
</b>

两个值中的任何一个都没有什么作用：

<b>
  <span style="FONT: "Arial"">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
  </span>
</b>

<b>
  <span style="FONT: 20pt">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
  </span>
</b>

有人能解释这种行为吗，或者至少告诉我应该查找哪些样式来取消外部样式？

Answer 1

我想我找到了我问题的答案，在font css属性文档页面上。它说：

(我强调)

再往下一点：

所以设置font: 20pt arial等同于设置font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: 20pt;line-height: normal;font-family: arial

特别是，font-weight从bold（或其他值）重置为normal。

所以为了解决我根本问题，我应该寻找没有指定字重的font标签。

P.S. font: arial 20pt没有这种行为的原因是因为这不是font的允许值，所以它被忽略：

而在font: arial 20pt中，字体族并不是最后一个指定的值。