div 和 CSS 的两倍字体大小

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 parent 的任何 span child 的字体大小加倍，从而为其所有 span child

设置 font-size: 100%

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

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

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

div 和 CSS 的两倍字体大小

Double font size from div with CSS

html

css

font-size