html - 如何强制所有孩子的字体粗细，但尊重嵌套深度

Question

我正在显示一些最初在 Flash 中创建的 HTML 标记。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

谢谢

score 3 · Accepted Answer

只需使用这个简单的 css：

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

score 1 · Accepted Answer

尝试这个：

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

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

2 回答 2