Question

行高的标准是否确保文本不会在底部或顶部被切除，无论设置如何（字体系列，字体粗细，字体大小等）？

人们可能会想到的一个可能合理的值可能是100%或1，但如果我line-height: 100%或line-height: 1，那么字母的下降就像{ {1}}，g根据字体在底部被截断。在我的特定设置中，y看起来像实际的最小值。

line-height: 1.2是否有任何（可能是相对的）值可确保角色的一部分不会被切断？

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>

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

1 个答案: