Question

这可能是不可能的，但我想添加一个css（理想情况下只有css），它可以增加所有子元素的字体大小。例如，如果您有各种字体大小：

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

我想添加一个类：

<div class="multiply-font">
   <h1>This is heading 1</h1>
   <h2>This is heading 2</h2>
   <h3>This is heading 3</h3>
</div>

例如所有尺寸将乘以一个因子。因此，将比没有等级的X倍大/小......

Answer 1

如果您为multiply-font-class声明font-size，那么如果您使用em单位，这恰好会发生。 em指的是您的字体大小（或准确的字体垂直高度），默认大小为1 em。如果您使用

声明

.multiply-font{
  font-size: 2em;
}

结果应该与描述完全一样（字体大小是两倍大）。

Answer 2

实际上你可以用javascript

来做到这一点

  var font_size = $('.multiple').css('font-size');
  var old_size = font_size.slice(0,font_size.length-2)*2;
  var font_type = font_size.slice(font_size.length,font_size.length-2);
    $('.multiple').css('font-size',old_size+font_type)

在某些情况下，它可能是百分比，您需要为其改进此代码。

Answer 3

如@ j-starick所述，您可以使用EM-units执行此操作 - 如示例所示：

.multiplycontent {
font-size: 2em;
}

<h1>Test heading h1</h1>
<h2>Test heading h2</h2>
<h3>Test heading h3</h3>

<div class="multiplycontent">
<h1>Test heading h1 multiplied</h1>
<h2>Test heading h2 multiplied</h2>
<h3>Test heading h3 multiplied</h3>
</div>

乘以儿童的字体大小

3 个答案: