将字体大小设置为1em是否有意义?

时间:2019-11-14 21:10:51

标签: css

我正在查看一个层叠样式表,该样式表最初由外部商店开发,然后在内部进行了重大修改。我们正在尝试对其进行一些优化,以消除在这段时间里出现的一些特殊情况和变通办法,我注意到许多样式有些奇怪:

element {
  font-size:1em;
}

在这里,element不是字面意思;这是一些任意的元素名称,类名等。

我相信以下说法是正确的:

  1. 除非另有说明,否则font-size将从父元素继承
  2. 当前的font-size可以表示为1em1ex1ch100%

这意味着font-size:1em与完全不指定字体大小完全相同,对吧?

在文件的最顶部,有以下定义:

*,* * {
  font-size: 1em;
}

这尤其也什么也不做,但是对所有元素都起作用。

如果没有font-size:1em,我可能会看到一个潜在的问题:字体大小失控。如果我有:

span.larger {
    font-size:larger;
}

然后,这可能会使文本长很多:

<span class="larger">
  This text is a little bigger
  <span>and bigger
      <span>and bigger</span>
  </span>
</span>

但是实际上并没有那样做:font-size:larger仅应用于外部范围,而不应用于内部范围。 compute 字体大小是继承的,而不是font-size的定义(这会导致 embiggening 失控。

我已经使用了诸如Firefox的检查器,Chrome的dev工具等浏览器工具来禁用这些样式,似乎并没有改变页面的外观,但是我并未对整个网站进行详尽的审查。

我想念什么吗?或者我可以简单地删除的所有实例

font-size:1em

更新 我显然想念了当您使用字体大小和嵌套元素进行更复杂的操作时会发生什么:

div {
  font-size:1.5em;
}

<div>
  Bigger
  <div>
    and bigger
    <div>etc.</div>
  </div>
</div>

这导致embiggening失控。这有点病态,因为将所有div定义为大于其父母可能不是您想要的。但是嵌套列表例如ol ol ol肯定会引起问题。

那么,这种结构是预防字体大小失控的预防措施吗?

* * {
  font-size:1em;
}

1 个答案:

答案 0 :(得分:0)

我猜是这样。

真的,如果您想使所有字体保持一致,那么我看来人们使用的rem是基于html字体大小的,那么您就不会遇到嵌入问题了。

通常,我认为在CSS中使用*被认为是不好的做法,更不用说使用* *