【问题标题】:Does it ever make sense to set the font-size to 1em?将字体大小设置为 1em 是否有意义?
【发布时间】:2019-11-14 21:10:51
【问题描述】:

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

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 仅应用于外部跨度,而不应用于那些内部跨度。 计算的字体大小是继承的,而不是字体大小的定义(这会导致失控embiggening

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

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

font-size:1em

?

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

div {
  font-size:1.5em;
}

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

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

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

* * {
  font-size:1em;
}

【问题讨论】:

    标签: css


    【解决方案1】:

    我想是的。

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

    总的来说,我认为在 css 中使用 * 被认为是不好的做法,更不用说使用 * *

    【讨论】:

    • 我同意星号作为选择器的评论。浏览器梳理 DOM 并找到块元素中的每个块元素似乎非常昂贵。
    • 我正在查看rem,当然,正是出于这个原因。阅读“CSS3”时,我想“是的,对”,但显然support is fairly good
    • 所以公平地说“使用* * { font-size:1em } 仅在 CSS 很草率的情况下才是必要的,正如粗心的字体大小对未由 css 类正确划分的元素所定义的那样“或者类似的?似乎在没有进一步限定的情况下定义div 以使font-size 更大(或者,实际上,任何可以像不透明或其他任何东西一样增长的属性)是危险的,并且需要丑陋的黑客来解决它的不良影响。但是,如果您定义 div.bigger 以使事情变得更大,那么您只会在您要求时获得更大的div
    猜你喜欢
    • 2016-02-05
    • 1970-01-01
    • 2013-09-08
    • 2021-04-07
    • 1970-01-01
    • 2019-12-23
    • 1970-01-01
    • 2018-05-23
    • 2018-11-27
    相关资源
    最近更新 更多