title: How to force font-weight on all children, but respect the nested depth
body: <p>I'm displaying some HTML markup which was originally created in Flash. Flash has an attribute called &quot;FACE&quot; which applies a custom font to the tag. I'm processing the markup on the server side before it's sent to the browser, it converts FONT tags into spans and the FACE attribute into a class name, e.g. &quot;Arial&quot; or &quot;ArialBold&quot;.</p>
  <p>I want to style the text to match the custom fonts (so Arial can only show font-weight:normal, and ArialBold can only show font-weight: bold). The problem is my css isn't handling it how Flash would.</p>
  <p>Flash might have this markup:</p>
  <pre><code>&lt;font face=&quot;ArialBold&quot;&gt;
    &lt;font face=&quot;Arial&quot;&gt;&lt;span&gt;&lt;b&gt;Some text&lt;b&gt;&lt;span&gt;&lt;/font&gt;
  &lt;/font&gt;
  </code></pre>
  <p>And it will display like this:</p>
  <blockquote>
  <p>Some text</p>
  </blockquote>
  <p>Here the Arial font is overriding the ArialBold font because it's nested deeper and the  tag renders as normal text because the Arial font doesn't have bold characters included.</p>
  <p>In the <a href="http://jsfiddle.net/kHFX8/2/" rel="nofollow noreferrer">jsfiddle</a> however, html/css will show the text as:</p>
  <blockquote>
  <p><strong>Some text</strong></p>
  </blockquote>
  <p>So, my question is, how do I fix the <a href="http://jsfiddle.net/kHFX8/2/" rel="nofollow noreferrer">jsfiddle</a>, so that the outputted text to display is:</p>
  <blockquote>
  <p><strong>Normal bold here</strong></p>
  <p>Hello World Good bye</p>
  <p><strong>Hello World Good bye</strong></p>
  </blockquote>
  <p>Example: <a href="http://jsfiddle.net/kHFX8/2/" rel="nofollow noreferrer">jsfiddle</a></p>
  <p>Thanks</p>