确保文本不被截断的最小行高

Question

是否有一个行高标准，以确保无论设置（字体系列、字体粗细、字体大小等）如何，文本都不会在底部或顶部被截断？

人们可能会想到的一个可能合理的值可能是100% 或1，但如果我这样做line-height: 100% 或line-height: 1，则诸如g、y 之类的字母的后缀将被删除根据字体在底部关闭。在我的特定设置中，line-height: 1.2 看起来像实际的最小值。

line-height 是否有任何（可能是相对的）值来确保字符的一部分不被截断？

Answer 1

您可以使用默认的line-height: normal：

正常

告诉用户代理将使用的值设置为基于“合理”的值 在元素的字体上。 [...]

这让浏览器根据字体系列、样式和粗细等因素确定最佳行高。请参见以下示例：

$(function() {
  $("p").each(function() {
    var h = $(this).height();
    $("<span style='background: #FC0;'></span>").text(" (" + h + "px)").appendTo(this);
  });
});

/* for Open Sans demo */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

p {
  font-size: 16px;
  line-height: normal;
}
.font-1 p {
  font-family: sans-serif;
}
.font-2 p {
  font-family: monospace;
}
.font-3 p {
  font-family: "Open Sans";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<blockquote>
  All paragraphs have same font size. However, their &quot;normal&quot; line height vary depending on font face and other factors such as whether bold or italic text is present on the line box. Results vary across browsers as well.
</blockquote>
<div class="font-1">
  <p>Normal text</p>
  <p>Normal text and <strong>strong text</strong></p>
  <p>Normal text and <em>emphasized text</em></p>
</div>
<hr>
<div class="font-2">
  <p>Normal text</p>
  <p>Normal text and <strong>strong text</strong></p>
  <p>Normal text and <em>emphasized text</em></p>
</div>
<hr>
<div class="font-3">
  <p>Normal text</p>
  <p>Normal text and <strong>strong text</strong></p>
  <p>Normal text and <em>emphasized text</em></p>
</div>