Question

我正在尝试确切地确定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>

我在500px上设置了style-it div的静态高度，该高度有5px border和20px padding。因此，我的div的内容的高度为450px。根据我先前对font-size和px的理解，我希望font-size的{{1}}上三行文字能完美地填充150px的内容，但是并非如此。

我将每一行文本都放置在自己的450px中，因此我们可以清楚地看到每一行（比Chrome浏览器中的div大）比我的173px规范大。

那么，这是怎么回事？字形本身实际上是150px的高度，并且围绕它们的“框”会根据某些内部浏览器规则任意调整吗？

有没有办法我可以肯定地知道“我有一个150px高的容器，并且可以通过将Xpx设置为{ {1}}”？

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

编辑：我应该更清楚自己的要求。我在弄清楚如何在div中放入文本没有麻烦，但是对为什么重复的链接文章指出font-size的值与Zpx的大小不相同的原因很感兴趣。换句话说，为什么在这种情况下甚至需要指定font-size中的em-square？

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

Answer 1

您的行的高度不完全是beforeAll(async () => { module = await Test.createTestingModule({ imports: [ElasticsearchModule], controllers: [RepliesController] }) .overrideProvider(ElasticsearchService) .useValue(/* your mock or whatever */) .compile();，因为150px和line-height是两回事。使用CSS属性text-size并将其设置为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;
  }

在CSS中指定“ px”时如何调整字体大小？

1 个答案: