在 CSS 中指定“px”时如何调整字体大小？ [复制]答案

【问题标题】：How are fonts sized when specifying "px" in CSS? [duplicate]在 CSS 中指定“px”时如何调整字体大小？ [复制]
【发布时间】：2019-05-02 21:53:30
【问题描述】：

我试图确定px 对字体大小在页面上分配空间方面的确切含义，而我得到的结果与我的预期不符。

我的印象是，将像素与font-size 结合使用意味着排版占用的垂直空间将与指定的值相匹配。例如，如果我指定font-size: 16px，则应用了该规则的一行文本的高度将为16px。请注意，我没想到实际字形的高度是16px，但浏览器会分配16px 来显示字形。

这里有一些代码可以用作参考，这样我就可以解释我期望看到的和我实际看到的：

.style-it {
  box-sizing: border-box;
  margin: auto;
  width: 500px;
  height: 500px;
  border: 5px solid black;
  padding: 20px;
  font-size: 150px;
  font-family: sans-serif;
}

<html>
<div class="style-it">
  <div>
    CSS
  </div>
  <div>
    IS
  </div>
  <div>
    AWESOME
  </div>
</div>

</html>

我在style-it div 上设置了500px 的静态高度，它有5px border 和20px padding。因此，我的div的内容高度为450px。以我之前对font-size 和px 的理解，我预计150px 的font-size 处的三行文本可以完美地填充450px 的内容，但事实并非如此。

我已将每一行文本放入它们自己的 div 中，因此我们可以清楚地看到每一行（Chrome 中的 173px）略大于我的 150px 规范。

那么，这里发生了什么？是不是字形本身的高度实际上是150px，并且它们周围的“框”会根据一些内部浏览器规则任意调整？

有没有一种方法可以让我确定“我有一个高度为Xpx 的容器，我可以通过将它们的font-size 设置为Zpx 来完美地容纳Y 行文本”？

只是我遇到的一个有趣的问题，我找不到一个好的答案。我不知道它在现实世界中是否非常有用，但我很想看看是否有人可以回答。

编辑：我应该更清楚我的要求。我不知道如何将文本放入 div 中，但我很感兴趣，正如重复的链接文章所述，font-size 值与em-square 的大小不同。换句话说，为什么在这种情况下甚至需要指定line-height 或1em？

对于遇到此问题的任何人，链接问题有一篇很棒的文章，正是我正在寻找的那种东西：http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first

【问题讨论】：

我建议接受@Michal 的回答，即使它有点框架挑战（不回答所提出的确切问题）。我怀疑你有一个 XY 问题。您真的只想将 N 行完美地放入容器中，但您认为最好的方法是计算像素，但是修改 line-height 似乎（对我来说）是最好的解决方案，因为知道不同的浏览器如何呈现字体可能站不住脚。
@ksav 如果我认为作者正在处理 XY 问题是正确的，那么他们想要解决的实际问题不是链接问题的重复。
是的。我刚刚阅读了@Michal 的答案，它似乎解释了操作最有可能试图弄清楚的内容。
我必须说边框不是宽度的一部分，因为我记得使用宽度 0 制作三角形并将像素宽度设置为边框，因此它将是 500-40 而不是 500-40-10。这似乎正是你的 css 中出现的额外像素加上行高也是你必须考虑的一个有趣的概念

标签： html css

【解决方案1】：

您的行的高度不完全是150px，因为line-height 和text-size 是两个不同的东西。使用 CSS 属性 line-height 并将其设置为 1em（这意味着行高将与文本大小相同），您的内容将完全是 450px 的高度。

.style-it {
    box-sizing: border-box; 
    margin: auto; 
    width: 500px; 
    height: 500px; 
    border: 5px solid black; 
    padding: 20px; 
    font-size: 150px;
    line-height: 1em; /* add this line */
    font-family: sans-serif;
  }

<html>
	<div class="style-it">
		<div>
			CSS
		</div>
		<div>
			IS
		</div>
		<div>
			AWESOME
		</div>
	</div>
</html>

【讨论】：

非常确定，如果未指定，浏览器有自己的默认行高，它将使用一些额外的间距来适应字体大小。确保您的容器与您的字体大小完全相同的唯一方法是指定行高
很好的答案，如果有点框架挑战的话。我怀疑最初的问题是一个 XY 问题：他们真的希望能够将 N 线拟合到区域中，他们认为最好的方法是按像素计算，而实际上最好的方法是调整线-height 属性。
@GregSchmit 问题不是在寻找完成任务的“最佳方法”，只是询问为什么当它出现在远处时，为什么该特定方法不是可行的解决方案。
@Mr-Programs 150 是正确的，因为边框宽度（10px）包含在元素的高度中，这要归功于 box-sizing 属性
@TylerBurki 那么恭喜：你问了一个已经回答的重复问题。我假设您的实际问题没有被该副本解决，这是仁慈的；这个答案就是您如何按照您描述的方式让文本整齐地放入容器中。