Question

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

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

这不好吗？使用ems进行字体大小时，我是否忽略了一个重要的事实？

Answer 1

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

有一种可扩展文本的方法，其中＆＃34;基线＆＃34;字体大小在HTML或BODY元素上设置。我通常设置这个＆＃34;基线＆＃34;字体大小为10px，因为它是一个很好的整数，使整个网站的ems更容易计算。在我的设计中说标题是15px。我将该标题设置为1.5em（1.5 x 10px = 15px）。由于这样的计算，你可能会注意到看似奇怪的值。

＆＃34;分数＆＃34;值也可能看起来不寻常。例如，＆＃34; 1.33em＆＃34;本质上是＆＃34; 1⅓em＆＃34;和＆＃34; 1.67em＆＃34;本质上是＆＃34; 1⅔em＆＃34;。它们分别实现了比基线大三分之一和三分之二的字体大小。

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

Answer 2

Showdev很好地说明了ems做了什么，但回答了你为何看到这样设置的问题。

本文很好地解释了如何在所有浏览器中实现一致的文本大小调整。这个问题是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 */
}

使用ems时奇怪但明确具体的字体大小

2 个答案: