html - 使用 CSS 将 div 的字体大小加倍

Question

我正在从所见即所得编辑器 (ckeditor) 生成内容。我想显示内容，但使用双倍字体大小，不更改 HTML(如果可能)。这是一个 HTML 示例

<div id="contents">
  <p style="text-align:center">
     <span style="font-size:72px">
       <span style="color:#FFFFFF"><span style="font-family:helvetica">Foo</span>
     </span>
     <span style="font-size:24px">Bar</span>
  </p>
</div>

我一直在尝试通过这样做将字体大小加倍:

span {
   font-size: 200%;
}

结果是 400%(因为在本例中是 2 个跨度)。

这里有什么想法吗？

Answer 1

将定义了 font-size 的 span 父级的任何 span 子级的字体大小加倍，从而设置 font-size: 100%为他们所有的跨度 child

span[style^="font-size"] span {
  font-size: 200%;
}

span[style^="font-size"] span span {
  font-size: 100%;
}

代码笔:http://codepen.io/anon/pen/NGWRNJ