CSS制做首字下沉

在杂志排版中，经常能看到首字下沉的效果。

在Web的排版中，也经常能看到上图这样的效果。而且经常看到的是首段首字下沉。那么今天这篇文章我们来聊聊如何使用CSS实现首字下沉效果。css

::first-letter实现首字下沉效果
早期中，实现首字下沉都是能过伪元素::first-letter来实现。其实现原重很是的简单，就是把首字font-size值设置较大，而后能过float来实现。好比：web

p::first-letter { color: #c69c6d; font-size: 5em; margin: 0 .2em 0 0; }

上面这段代码将会把全部段落的首字下沉，若是仅须要对首段首字下沉，那还须要配合其它的选择器来实现。浏览器

p:first-child::first-letter { color: #c69c6d; float: left; font-size: 5em; margin: 0 .2em 0 0; }

Initial-Lettersvg

前面看到的效果是老式的CSS实现的首字下沉效果。虽然是实现了，但借助float仍是存在必定的缺陷，并且灵活度也并不强。不过值得庆幸的是，在CSS Inline Layout Module Level 3提供了一个新的思路和方案：采用initial-letter。
这个新属性能很是轻易的帮且咱们实现首字下沉的效果，但他只能运用于块容器首行首字。一样须要配合::first-letter一块儿使用。好比：性能

.intro::first-letter { initial-letter: 7; }

获得的效果以下图所示：
ui

initial-letter有一个很是灵活之处，它接受两个值：spa

initial-letter: 3 3

第一个值表示的行高，第二个表示沉度。将前面的示例换换：code

.raised-cap::first-letter { initial-letter: 3 1; } 
.sunken-cap::first-letter { initial-letter: 3 2; } 
.drop-cap::first-letter { initial-letter: 3; }

最终获得的效果以下：
xml

再来看看浏览器目前对initial-letter属性的支持力度。你们或许会很失望，但不用过于担忧，我想不须要过多久浏览器会很快就对该属性支持。图片

虽然浏览器对该属性支持度仍是满天红色，但咱们能够借助早前介绍的@supports来作一些降级处理：

// 浏览器不支持采用之前的方案 
@supports (not(initial-letter: 5)) and (not(-webkit-initial-letter: 5)) { 
    .intro::first-letter { 
        color: hsl(350, 50%, 50%); 
        font-size: $cap-size;  
        float: left;  
        line-height: .7;  
        margin: 17px 2px 0 0; 
    } 
} 

// 支持的浏览器采用下面的方案 
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
    .intro:nth-of-type(1)::first-letter { 
        initial-letter: 3;  
    } 
}

效果以下：
http://codepen.io/airen/pen/PWPOjW

总结 文章简单介绍了如何使用CSS实现首字下沉效果。特别是CSS Inline Layout Module Level 3新模块中提供的initial-letter属性。该属性能更灵活的实现首字下沉效果。这篇文章只是简单的介绍了initial-letter属性，但该模块还提供了其它的一些属性，好比initial-letter-align和initial-letter-wrap。后面将花一个篇幅来介绍整个模块中相关属性的使用。