Why does the font CSS property cancel the bold font weight?

Question

I've been asked to remove unnecessary tags from a computer-generated HTML that has a lot of useless tags in it (I just want to keep the color/strong/em information). I came across something similar to the following HTML:

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

For me (on chrome and firefox) it displays bold text as bold and not bold text as non-bold , I'm confused about this. In particular, this made my task more complicated: I thought I could just remove the tags without color/strong/em information, so changed it to the following:

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

But now, all the text is bold instead of how it was before.

I'm trying to figure out what I can put in the FONT style to reproduce this behavior:

Replacing Arial with foo maintains this behavior:

<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>

After switching the size and font, the behavior changed:

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

Neither of the two values ​​has any effect:

<b>
  <span style="FONT: &quot;Arial&quot;">
    <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>

Can anyone explain this behavior, or at least tell me what styles I should look for to suppress the outer styles?

Answer 1

I think I found the answer to my question, on the font css properties documentation page. it says:

(my emphasis)

A little further down:

So setting font: 20pt arial is equivalent to setting font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: 20pt ;line-height: normal;font-family: arial

In particular, font-weight is reset from bold (or other value) to normal.

So to solve my fundamental problem, I should look for font tags that do not specify a font weight.

P.S. font: arial 20ptThe reason there is no such behavior is because this is not an allowed value for font, so it is ignored:

And in font: arial 20pt, the font family is not the last specified value.