如何使带有文本的块准确地适应文本边界？

Question

该块是<h2>Test</h2><style>    h2 {        padding: 0;        margin: 0;        line-height: 1;        font-family: "Montserrat", sans-serif;        font-size: 34px;    }</style>我从顶部到底部的距离很小。如何使文本精确地适应其块？文本的大写字母的顶部需要是块的边框。我得到的块的图片。蓝色区域 - 是块。但顶部和底部边框块与顶部和底部文本边框不同。预期结果 - 文本字符的顶部和底部是块边界。

Answer 1

你所看到的是line-height. 例如，将其设置为 less 以删除文本上方和下方分配的空白区域。

h2 {

  outline: 1px solid red;

  padding: 0;

  margin: 0;

  line-height: 1;

  font-family: Roboto, sans-serif;

  font-size: 34px;

  line-height: 24px;

}

<h2>Test jpg ÂÄÊ</h2>

Answer 2

如果您使用 vw（视口宽度）单位设置类型，则可以找到一个精确的数字，其中文本非常适合容器，并且在调整大小时不会中断。在这种情况下，

h2{

font-family: Roboto, sans-serif;

font-size: 25.5vw;

}