首字下沉

by Yan

常在一些书刊上看到首字下沉的效果，印象非常好。今天查了查，发现可以用css的一个Pseudo-elements（赝元素？）first-letter 来获得这种效果的。这里介绍一下，我在WordPress中的使用方法。类似办法地可以在任何网页里实现。

首先我在style sheet里加上：

#fp:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
margin-right: 3px;
}

这样，已经可以通过给相应段落加<p id=”fp”> tag 来得到首字下沉效果。

不是很方便，如果你使用wordpress，在/wp-admin/quicktags.js的edButtons里加上这段：

edButtons[edButtons.length] =
new edButton(‘ed_dropcap’
,’DropCap’
,'<p id=”fp”>’
,'</p>’
,’c’
);

这样在编辑窗口里就会看见一个DropCap快捷标签。如果想让某一段文字的首字下沉（和这个帖子一样），选上这一段，然后点击DropCap，也可以用快捷键alt-c。

如果要更方便，那就得做个plugin，让每个帖子自动首字下沉了。不是每个帖子首字下沉后都会好看，但对某些blog，这样一个plugin还是很有诱惑力吧。高手们参与啊，看谁先做出来。

update：

很多人问在什么什么里怎么实现，应该都能做到，因为这是一个css设置。可惜我没用过其它的blog引擎。

使用blogger.com的blog可以很容易实现这个首字下沉。对于我正使用的模板，加上这一段就可以了。

.post-body p:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
margin-right: 3px;
}

如果帖子内容开始不是文字，而是tag，比如<img>，首字就不会下沉。具体使用时，你应该察看一下模板，包含<$BlogItemBody$>的div class，把上面的css style作相应改动。