CSS 行高指南

7
我记得曾经看过一份样式指南,解释了每个元素的合适行高应该是多少。我在谷歌上找不到它。
如果有人能链接给我这样的指南,或者在回答中解释一下,我将不胜感激。
谢谢!
编辑:对不起,请让我澄清一下。我不是在问如何使用CSS设置行高,而是各种元素推荐的行高是多少。例如标题、段落文本等。
谢谢!
5个回答

9
也许这些参考资料更符合您的需求。我没有找到一个明确的规则,但至少以下是一些需要考虑的事情。
这篇文章建议它取决于您选择的字体族: http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/ 这篇文章建议它取决于行的宽度: http://kingdesk.com/articles/optimal-line-height/ 这个参考基本上同意以上两点: http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/ 主要规则似乎是(1)更宽的文本行需要更大的行高,(2)如果小写字母的高度占大写字母高度的很高比例,则需要根据字体设置更大的行高。
最好的方法可能就是凭经验来调整,尽量避免出现难以理解的长段落。

1
@Alon 我已经更新了损坏的链接,指向存档副本。谢谢你让我知道! - Tim Goodman

8

这里的信息很基础,但非常有用。

总结一下:

默认的line-height:normal会给出line-height:1.2,即字体大小的120%。如果您要更改它,最好还是使用没有单位的数字,例如lineheight:1.5(字体大小的150%),因为然后元素的行高将从该元素的字体大小计算出来,即使行高是从具有不同字体大小的元素继承而来。

如果您使用line-height:10em,则会根据指定行高的元素上的字体进行计算...如果此行高被具有不同字体大小的元素继承,则可能会出现错误。

同样地,像line-height:10px这样的特定像素数量在应用于具有不同字体大小的元素时可能是错误的。


0

通常是字体大小的120%。


0

正常的行高值是normal。您可以使用数字(如1.6、2等)进行编辑。


你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节,例如引用或文档,以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
请在您的回答中提供代码。 - ethry

0

W3学校建议(这里)使用1.6的行高,但我也看到1.2到1.45之间的行高效果不错


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接