使用em单位时字体大小不正确

Question

我的代码的默认font-size相当于10px或0.625em。因此，根据此规则，要将<p>的字体大小设置为7px，我可以使用0.7em。但在我的情况下，即使我将9px的字体大小减小为{{1}，浏览器也会采用固定字体大小<p>（在＆＃34;计算＆＃34;浏览器部分中检查）或更少。

＆＃13;

＆＃13;

0.5em

＆＃13;

body {
  font-size: 0.625em;
}

h1 {
  font-size: 2.5em; 
}

h2 {
  font-size: 1.875em; 
}

p {
  font-size: 0.7em; 
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法设置

body {
  font-size: 0.625em;
}

您需要将10px设置为正文字体大小。 然后使用em计算将按预期工作。否则，它将采用浏览器设置的默认font-size。

body {
  font-size: 10px;
}

h1 {
  font-size: 2.5em; 
}

h2 {
  font-size: 1.875em; 
}

p {
  font-size: 0.7em; 
}

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

详细了解如何设置em font-sizes here

Answer 2

如果您希望字体大小与根字体大小（在html的规则中设置，而不是body，并且应该在px）中设置严格关系，那么您必须使用rem单位或百分比，而不是em（这将与特定元素或其父元素的默认浏览器大小相关）

另外，大多数浏览器都有“最小字体显示”设置，可防止小尺寸变得不可读。很可能在浏览器中设置为9px。

Answer 3

正如你所说 p的字体大小为7px我可以使用0.7em ，这是不正确的，因为这里你的默认字体大小是16px。如果

10px == 0.625em then
7px = (0.625/10)*7em = 0.4375em

如果您使用 10px 作为默认字体，则必须设置 body 和 {{1} html 中的字体大小，即 px

10px

检查以下代码段

html,
body {
  font-size: 10px;
}

html{
  font-size: 10px;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.7em;
}