Chrome 显示字体太大答案

【问题标题】：Chrome renders font size too bigChrome 显示字体太大
【发布时间】：2021-04-28 17:37:22
【问题描述】：

我对以下 html/css 代码有疑问：

body{
    font-size: 3.8em;
    color: white;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
}

div{
    margin: 0px;
    margin-bottom: 1em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

#title,#footer{
    background-color: #1e9e40;
    font-size: 0.5em;
    padding: 0.6em;
}

#footer{
position:absolute;
bottom:0px;
margin-bottom: 0px;
}

#main{
    padding: 1.3em;
    background-color: #540054;
    margin-top: 2.5em;
    font-size: 0.65em;
    text-align: justify;
}

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>css problems</title>

</head>

<body>
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui     officia deserunt mollit anim id est laborum.</div>
<div id="footer">This is the correct font size!</div>
</body>

</html>

当您在 Chrome 开发人员模式下查看渲染网页并激活移动视图时，#title 使用的字体大小比 #footer 大。我无法解释为什么。你可以吗？截图如下：

【问题讨论】：

我在 Chrome (Windows 10) 上看不到问题。您使用的是什么浏览器/系统？
如果您没有<meta name="viewport" ...> 设置，那么您的移动视图几乎就是运气。
@AHaworth 我也在 Windows 10 上使用 Chrome（64 位版本 88.0.4324.104）。但请确保您处于移动模式。首先你需要进入开发者模式（Ctrl+Shift+C），然后你必须切换到移动模式（Ctrl+Shift+M）。例如选择 Pixel 2 作为设备。但问题出现在许多设备上。
@Alohci 你是对的。但我仍然想了解这个问题。两个 div 应该有相同的字体大小。
我不建议您对初学者使用 ems 或 pxs。很难维护（ems）。这是example link，我在其中比较了 ems、rems 和 pxs。我建议您使用 rems 或 pxs ，除非您真正了解 em 在多个嵌套元素中的行为方式。是的，<meta name="viewport" ..> 会阻止你解决这个问题。

标签： css font-size

【解决方案1】：

检查了您的代码。

我也在Chrome开发者模式下针对不同的移动设备进行了测试，看到了同样的效果。在桌面显示中，浏览器使用默认的用户代理样式表，因此没有明显问题。

不过，在移动视口中，会根据特定设备应用缩放。这将对具有相对大小的元素产生影响，例如ems。

基本上，#footer div 上发生的事情是因为它有position:absolute，因此它的行为不像块级元素。如果您将相同的固定高度设置为 #header, #footer，并且不对代码进行其他更改，则两者的字体大小也将相同。

同样，如果您使用position: absolute 定位页眉，则字体大小将与页脚相同。 #header 和 #footer div 中的字体大小是根据父元素计算的，在本例中是 <body> 元素。由于<body> 元素设置了字体大小的相对单位 (em)，因此它也受到该设备的用户代理默认样式的影响。如果您将<body> 元素中的 font-size 设置为固定大小的值，例如 px，您将看到这一点，其中子元素也会受到影响，并且与此值相关的大小相同。

正如其他人所提到的，如果您将此标签添加到标题中： <meta name="viewport" content="width=device-width, initial-scale=1">，您将避免这些尺寸问题，因为它将比例值设置为基础。 我还在下面添加了一个符合标准的示例。

为了便于参考，我还将您提供的代码放入可运行的 sn-p 中：

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
  position: relative;
}

div {
  margin: 0px;
  margin-bottom: 1em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

#title,
#footer {
  background-color: #1e9e40;
  font-size: 0.5em;
  padding: 0.6em;
}

#main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

#footer {
  position: absolute;
  bottom: 0px;
  margin-bottom: 0px;
}

<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="footer">This is the correct font size!</div>

此外，理想情况下，您应该在语义上构建代码，搜索引擎和屏幕阅读器可以轻松解析。这包括包裹在<h1> 标记中的页面标题，以及<p> 标记中的正文，例如：

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
}

div {
  margin: 0px;
  margin-bottom: 1em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

header,
footer {
  background-color: #1e9e40;
  padding: 0.6em;
}

header h1 {
  font-size: 0.5em;
  font-weight: normal;
  margin: 0;
}

main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

footer {
  margin-bottom: 0px;
  font-size: 0.5em;
}

<header>
  <h1>Title font should be smaller!</h1>
</header>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>This is the correct font size!</footer>

作为参考，<h1> 元素的样式看起来像页脚文本，包括相同的样式。由于应用了默认的用户代理样式，因此有时会有更多的余量。

【讨论】：

非常感谢您的回答！在我的情况下，您能否再解释一下#title 和#footer 的parant 元素是什么？我认为两者都是身体，但显然不是。 Chrome 显示计算出的 body 字体大小为 60.8 像素，计算出的 #footer 字体大小为 30.4 像素。这很好，因为我将#footer 设置为 0.5em。但是对于#title，计算出来的字体大小是 45.3px。这里的父级是什么，为什么？
<body> 是父级。您不应使用position: absolute 作为页脚。如果你想把它固定在底部，你应该使用position: fixed。您也可以将 <html xmlns="http://www.w3.org/1999/xhtml"> 替换为 <html>，因为它在 HTML5 中是可选的，在 HTML4.01 中无效，并且仅在 XHTML 中需要。
@TimothyAlexisVass 感谢您的建议。一旦我了解发生了什么，我将接受相应的答案。所以 body 是页脚的父级，好吧。但它的父标题是什么？ header 的父级应该有两倍于 title 本身计算的字体大小。我很困惑你告诉我我不应该使用 position: absolute 因为我在哪里使用 position: absolute 字体大小得到正确计算。
您添加的每个<div> 都有<body> 作为父级。您的代码不正确，这就是它失败的原因。我将提供正确代码的答案。
@TimothyAlexisVass 使用 karolus 的答案，我自己能够想出“正确”的代码。例如，将标题设为绝对（或固定）。但我不明白为什么我的代码不正确，我想了解我的代码中的字体大小是如何计算的。其背后的公式是什么？

【解决方案2】：

再次查看了 karulos 的答案后，他告诉您您的代码发生了什么，而不是什么是错误的，什么是正确的。

对于您想要实现的目标并保留您已完成的部分内容，这将是正确的 HTML5 代码：

根本没有理由向正文、页眉或页脚添加定位。您也可以像这样保留<html> 标记，而无需定义 xhtml 命名空间。您还应该使用<header>、<main> 和<footer> 元素而不是<div>。

* {
  box-sizing: border-box;
}

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
}

header, footer, main {
  margin: 0 0 1em 0;
  text-align: center;
  width: 100%;
}

header, footer {
  background-color: #1e9e40;
  font-size: 0.5em;
  padding: 0.6em;
}

main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

footer {
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <header>Title font has the correct font size</header>
  <main>And the rest of the code makes some sense...<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</main>
  <footer>This is the correct font size</footer>
</body>

</html>

【讨论】：

【解决方案3】：

您应该为不同的组件指定不同的字体大小，或者您可以单独更改所需元素的字体大小，如下所示

body{
    font-size: 3.8em;
    color: white;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
}

div{
    margin: 0px;
    margin-bottom: 1em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

#title,#footer{
    background-color: #1e9e40;
    font-size: 0.5em;
    padding: 0.6em;
}

#title {
  font-size: 0.3em;
}

#footer{
//position:absolute;
bottom:0px;
margin-bottom: 0px;
}

#main{
    padding: 1.3em;
    background-color: #540054;
    margin-top: 2.5em;
    font-size: 0.65em;
    text-align: justify;
}

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>css problems</title>

</head>

<body>
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui     officia deserunt mollit anim id est laborum.</div>
<div id="footer">This is the correct font size!</div>
</body>

</html>

谢谢

【讨论】：