最小线高,以确保文本不被切断

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);
  });
});

p {
  font-size: 16px;
  /* line-height: normal is default */
}
.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>