line-height的小技巧

CSS中的line-height属性控制着文字的行间距离。通常被设置为一个无单位的值（例如：line-height:1.4）,与文字尺寸是成比例的。它是排版中的一个重要的属性。太低了文字会挤在一起，太高了文字会分开很远。是不可读的。

这篇文章会集中讨论一些技巧。如果你知道（或者可以算出）line-height的确切值，你可以做出一些整洁的东东。

给每一行不同的颜色

没有 ::nth-line(),不幸的是，实际上我们也不能可靠的用<span>,因为让文字在不同的位置换行有大量不同的原因。

有一个方法，即使不标准，使用了一个元素的背景作为文字的背景：

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

有另外一个技巧，我们可以用linear-gradient()，控制一种颜色没有渐变成另外一种。我们已知行高是22px,可以使渐变正好在行间换色。

.text {
  background-image: linear-gradient(
    to bottom,
    #9588DD,
    #9588DD 22px,
    #DD88C8 22px,
    #DD88C8 44px,
    #D3DD88 44px,
    #D3DD88 66px,
    #88B0DD 66px,
    #88B0DD);
}

结合这两个技巧：

在不支持文字的background clipping的浏览器中，像FireFox,也许会用固定颜色。也许那很酷，你也很喜欢。也许你宁愿回退到固定颜色的文字。在那个情况下，可以用@supports只在支持的情况下请求。

同样的，由于反复的在使用line-height,最好把它变量化。在这里我会用SCSS，但是某天使用真正的CSS变量会更优雅一点，这样就可以改动他，即使已经渲染完成，它可以继续起作用。

$lh: 1.4em;

body {
  font-size: 1em;
  line-height: $lh;
}

@supports (-webkit-background-clip: text) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      to bottom,
      #9588DD,
      #9588DD $lh,
      #DD88C8 $lh,
      #DD88C8 $lh*2,
      #D3DD88 $lh*2,
      #D3DD88 $lh*3,
      #88B0DD $lh*3,
      #88B0DD);
  }
}

在元素的顶部使用是最容易的。一个例子，前面几行为了加强语气有些改变。

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) $lh,
    rgba(white, 0.6) $lh,
    rgba(white, 0.6) $lh*2,
    rgba(white, 0.4) $lh*2,
    rgba(white, 0.4) $lh*3,
    rgba(white, 0.2) $lh*3,
    rgba(white, 0.2));
}

如果我们试着把最后几行随意数量的文本作为目标就更难了。需要第一个颜色从顶部向下环绕，除去几行。幸运的，可以用calc()来实现。

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) calc(100% - 66px),
    rgba(white, 0.6) calc(100% - 66px),
    rgba(white, 0.6) calc(100% - 44px),
    rgba(white, 0.4) calc(100% - 44px),
    rgba(white, 0.4) calc(100% - 22px),
    rgba(white, 0.2) calc(100% - 22px),
    rgba(white, 0.2));
  background-position: bottom center;
}

也有其他方法实现，比如覆盖伪元素gradient（用pointer-events: none;那并不恼人）。

文字间的线

对solid-color-stops使用上面提到的类似技术，我们可以在已知line-height时创建精确的1px的重复的行梯度。最简单的方法是用repeating-linear-gradient()，同样确保所有的元素优雅的呈现（像也基于line-height的padding）。

为了获得1px的线，我们需要知道line-height有多少像素，然后减1.目标是渐变在准确已知的line-height重复，在那里的最后像素是线条。由于设置了body字体1em,就是16px,由于line-height是em的，可以删除单元，除以1em,然后乘以16px,当需要的时候减去1.

每行一个式放置图片

如果你知道确切行高，可以做的另外一件事情是使得background-size匹配它，至少在垂直轴上。然后可以使得它垂直重复，会按照每行一个图片的方式排列。

.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}

英文原文：http://css-tricks.com/fun-line-height/?utm_source=tuicool