Как заставить шрифт-вес на всех детях, но уважать вложенную глубину

Question

Я показываю некоторую HTML-разметку, которая была изначально создана во Flash. Flash имеет атрибут "FACE", который применяет к тегу собственный шрифт. Я обрабатываю разметку на стороне сервера перед отправкой в ​​браузер, она преобразует теги FONT в промежутки, а атрибут FACE - в имя класса, например, "Arial" или "ArialBold".

Я хочу, чтобы стиль текста соответствовал пользовательским шрифтам (поэтому Arial может показывать только font-weight: normal, а ArialBold может показывать только font-weight: bold). Проблема в том, что мой CSS не справляется с этим так, как Flash.

Flash может иметь такую ​​разметку:

<font face="ArialBold">
  <font face="Arial"><span><b>Some text<b><span></font>
</font>

И это будет отображаться так:

Некоторый текст

Здесь шрифт Arial переопределяет шрифт ArialBold, потому что он вложен глубже, а тег отображается как обычный текст, поскольку шрифт Arial не содержит жирных символов.

Однако в jsfiddle html / css будет отображать текст как:

Некоторый текст

Итак, мой вопрос, как мне исправить jsfiddle, чтобы выводимый текст отображался так:

Нормальный жирный здесь

Привет Мир Прощай

Привет Мир Прощай

Пример: jsfiddle

Спасибо

Answer 1

Просто с этим простым CSS:

.Arial *, .ArialBold * { font-weight: inherit; }
.Arial { font-weight: normal; }
.ArialBold { font-weight: bold; }

Демо: http://jsfiddle.net/kHFX8/15/

Answer 2

Попробуй это:

скрипка: http://jsfiddle.net/kHFX8/11/

.Arial > .ArialBold b{
   font-weight: bold;
}

.Arial {
   font-weight: normal;
}
.ArialBold, .Arial > .ArialBold span{
  font-weight: bold;
}