行高这个属性可能是我们平常没有在意过的,它表示一行文字所占用的高度。我们写一段内容,两行文字之间会有一些空白,这样看起来很舒服。而之所以会有这些空白,是因为每一行文字所占用的高度都要比文字本身的高度更大。

你也许会说,为什么两段文字之间的空白要更大一些?这里的空白不只与行高有关,还受到了一些其他属性的影响,我们在后面会讲到。所以现在我们想测试行高的时候,请在一个段落内写足够多的文字,让它自动折行。

这个属性的名字也非常的简单,line-height,是多么的简单直白啊。

它的值也有多种的表达方式,默认是 normal,就是浏览器的默认值,大约是 1.2,和所选用的字体有关。

但是默认值是不需要我们进行设置的,而我们对它进行设置的时候,推荐使用没有单位的数字,比如:

p {
  line-height: 1.6;
}

它表示行高是当前文字大小的多少倍。听起来好像和 em 相似。但这里指的是相对于这个元素本身字号的倍数;em 则是相对于父元素。

同样的,行高也可以使用 pxemrem 和百分比,所代表的意义和我们前面所讲的是一样的。但是因为这些表示相对尺寸的单位,相对的是其他元素,这样可能引起一些混乱。所以没有特别的需求,推荐使用无单位数字。


我们认识这些单位之后,行高就显得非常简单了。为了凑字数,我们再讲一个非常简单的属性:font-style。字面上看,它就是文字的样式。它的设置本身就不复杂,而我们日常用到的就更简单了,一般就只有下面这种用法:

p {
  font-style: italic;
}

就是把当前元素的文字设置为斜体,你也可以把它的值设置为 normal,这是我们正常看到不倾斜的样式,当然这是默认的,所以一般情况下,我们也不会用到这个设置。(除非你是想在一堆倾斜的文字中偶尔正常一下)

不过因为中文的斜体并不怎么好看,而且好多字体也并没有特意的给出它的斜体样式。觉得大部分中国人并不怎么喜欢这个设置,反正我是会在中文情况下,适当回避它(毕竟老鼠眼神不好,斜体字太不好读了。


到这里我们就学习了四个简单的属性,现在一起来把它们综合运用一下:

p {
  color: #0084FF;
  font-size: 22px;
  line-height: 2.6;
  font-style: italic;
}

这里是许多的文字,为了能够明确查看效果,所以我故意把字号和行高的值都设置得大了一些。

【本章助记卡片:卡片 for 第三十三章