3

我注意到使用 em 字体的网站通常有奇怪但明确的特定数字，例如：在流行的重置 css - normalize.css 中，我发现 h3 设置为 1.17em，h4 设置为 1.33em，h5 设置为 1.67em ， 为什么是这样？是否有计算器或我应该用来计算每个字体大小的东西？

我一直在为标题、p、标题等调整 ems 中的字体大小，但没有计算器或任何东西，我只是将其放大或缩小，直到我认为它看起来不错。换句话说，我的网站有 0.7em、0.9em、1em、1.1em 等字体大小，甚至是 4em（我喜欢大 h1）。

这很糟糕吗？在使用 ems 字体大小时，我是否忽略了一个重要事实？

4

2 回答 2

4

如您所知，em字体大小的单位允许文本元素的大小保持其相对于其他文本元素的比例。

有一种可缩放文本的方法，其中在 HTML 或 BODY 元素上设置“基线”字体大小。我通常将此“基线”字体大小设置为 10 像素，因为它是一个很好的整数，并且使ems整个站点更易于计算。假设我的设计中的标题是 15px。我会将该标题设置为 1.5em (1.5 x 10px = 15px)。由于此类计算，您可能会注意到看似奇怪的值。

“分数”值也可能看起来不寻常。例如，“1.33em”本质上是“1 ⅓ em”，而“1.67em”本质上是“1 ⅔ em”。这些实现的字体大小分别比基线大三分之一和三分之二。

如果您是动态设计（没有设计补偿），您可能只需调整直到看起来正确即可。通过更改浏览器的缩放和/或字体大小默认值来查看页面的反应始终是一个好主意。

于 2013-02-05T01:28:46.693 回答
1

Showdev 很好地说明了 em 的作用，但可以回答您为什么会这样看待事物的问题。

本文很好地解释了如何在所有浏览器中实现一致的文本大小。这个要点是 IE7 中的 14px 与 Firefox 中的 14px 不同。Ems 给出了更一致的结果。 http://alistapart.com/article/howtosizetextincss

另外，只是为了给出一个扩展的解释。Ems 是相对于父元素的字体大小的。所以如果我有：

body {
  font-size: 14px;
}
p {
  font-size: 1em;  /* 14px */
}
h2 {
  font-size: 1.5em; /* 21px */
}
#myDiv {
  font-size: 16px;
}
#myDiv h1 {
  font-size: 2em; /* 32px */
}
于 2013-02-05T01:42:11.107 回答