时间戳

首页 > 解决方案 > 将字体大小设置为 1em 是否有意义？

css - 将字体大小设置为 1em 是否有意义？

问题描述

我正在审查最初由外部商店开发然后在内部进行大量修改的级联样式表。我们正在尝试对其进行一些优化，以删除在此期间引入的一些特殊情况和变通方法，我注意到许多样式中有一些奇怪的地方：

element {
  font-size:1em;
}

在这里，element不是字面意思；它是一些任意元素名称、类名等。

我相信以下是真实的：

  1. 除非另有说明，否则font-size继承自父元素
  2. 电流font-size可以表示为1em, 1ex, 1ch, 或100%

这意味着这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仅适用于外部跨度而不是那些内部跨度。计算的字体大小是继承的，而不是字体大小的定义（这会导致失控的.

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

我错过了什么吗？或者我可以简单地删除所有实例

font-size:1em

?

更新 我显然错过了当你用字体大小和嵌套元素做一些更复杂的事情时会发生什么：

div {
  font-size:1.5em;
}

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

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

那么，这种结构是防止字体大小失控增加的预防措施吗？

* * {
  font-size:1em;
}

标签： css

解决方案

大概吧。

真的，如果你想保持所有字体一致，我似乎有人使用rem基于 html 字体大小的字体，那么你就不会有你的 embiggenning 问题。

一般来说，我认为在 css 中使用被认为是不好的做法*，更不用说使用* *

推荐阅读