CSS中行高line-height属性的一些使用技巧

先来回顾一下line-height的基础知识：

语法： line-height : normal | <实数> | <长度> | <百分比> | inherit
说明： 设置元素中行的高度。
值： normal：默认行高，一般为1到1.2； 实数：实数值，缩放因子； 长度：合法的长度值，可为负数； 百分比：百分比取值基于元素的字体尺寸。
初始值： normal
继承性： 继承
适用于： 所有元素
媒体： 视觉
计算值： 长度和百分比值为绝对值；其他同指定值。

CSS中的line-height属性控制着两行文本之间的空白多少，通常是会设置成一个无单位数值（比如line-height:1.4），表明其与font-size属性所构成的比例。line-height在排版上是非常重要的一个属性，太低的话，文字的行与行之间会尴尬地挤在一起，太高的话它们又会尴尬地分的太开，无论哪一种都对阅读不利。不过你也许早就知道这一点了。

这篇文章中我们会着重介绍一些技巧，如果你知道（或者能搞清楚）line-height的确切值，你可以做得更有趣 。

为每一行文本指定不同颜色

不幸的是，我们并没有::nth-line这个选择器。我们也不能指望<span>会靠得住，数不清的原因可能导致文本在某处被断开。

有一个办法，虽然不标准，就是利用元素的背景来充当文字的背景。

CSS

也有另一个技巧，你可以用linear-gradient()加上色彩点来控制颜色之间不会互相渐变，让一个颜色结束之后突然开始另一个颜色。我们假设line-height的值为22px，那我们就可以让渐变每逢22px断开一次。

Sass

1. .text {   
2.   background-image: linear-gradient(   
3.     to bottombottom,   
4.     #9588DD,   
5.     #9588DD 22px,   
6.     #DD88C8 22px,   
7.     #DD88C8 44px,   
8.     #D3DD88 44px,   
9.     #D3DD88 66px,   
10.     #88B0DD 66px,   
11.     #88B0DD)   
12. }  

两个技巧结合之后：

如果你的浏览器不支持text的background-clip，比如Firefox，那你就会看到位于文字背后的色彩长条，可能你会觉得这样看起来很酷甚至会很喜欢，但或许你宁可回到设置文字颜色的老路上来。如果是后者的话，你可以用@support来设置成：如果浏览器支持，css才生效。

另外，既然你反复的在利用line-height的值，说不定把他变成变量比较好。在这里我用SCSS，不过哪天可以使用真正的CSS变量那就真的太棒了，这样在页面渲染完还可以继续修改，并且看着它生效。

Sass

1. $lh: 1.4em;   
2.     
3. body {   
4.   font-size: 1em;   
5.   line-height: $lh;   
6. }   
7.     
8. @supports (-webkit-background-clip: text) {   
9.   p {   
10.     -webkit-background-clip: text;   
11.     -webkit-text-fill-color: transparent;   
12.     background-image: linear-gradient(   
13.       to bottombottom,   
14.       #9588DD,   
15.       #9588DD $lh,   
16.       #DD88C8 $lh,   
17.       #DD88C8 $lh*2,   
18.       #D3DD88 $lh*2,   
19.       #D3DD88 $lh*3,   
20.       #88B0DD $lh*3,   
21.       #88B0DD);   
22.   }   
23. }  

最简单的办法是在最上层的元素中应用这些属性，这里有个样例，它的最初几行是重点。

Sass

1. .text {   
2.   -webkit-background-clip: text;   
3.   -webkit-text-fill-color: transparent;   
4.   background-image: linear-gradient(   
5.     to bottombottom,