CSS Line-Height Guide

Jou*_*key 6 css

我记得读过一个样式指南,解释每个元素的正确行高应该是多少.我在谷歌上找不到它.

如果有人能将我链接到这样的指南,或者在答案中解释,我将不胜感激.

谢谢!

编辑:抱歉,请让我澄清一下.我不是在询问如何使用CSS来设置行高,而是建议的行高是多少.例如标题,段落文本等

谢谢!

Tim*_*man 9

也许这些参考更像你正在寻找的.我还没有找到明确的规则,但至少在这里需要考虑一些事情.

这个建议取决于你选择的font-family: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)如果小写字母的高度是上部高度的高百分比,则基于字体需要更大的行高度案件信件.

最好的方法可能只是眼球,并尽量避免不可穿透的文本墙.


Tim*_*man 8

这里的信息非常基本,但很有用.

总结一下:

默认line-height:normal给出line-height:1.2,字体大小的120%.如果您要更改它,通常最好使用没有单位的数字,例如lineheight:1.5(字体大小的150%),因为元素的行高将根据该元素的字体大小计算,甚至如果行高是从具有不同字体大小的元素继承的.

如果您改为说line-height:10em,它是根据指定行高的元素上的字体计算的...如果此行高由具有不同字体大小的元素继承,则可能是错误的.

同样地,如果像素line-height:10px由具有不同字体大小的元素继承,则特定数量的像素肯定是错误的.