ifireyy

首字下沉的效果很常见，特别是以前做WORD文档的时候，效果还不错的。网上目前流行的一种方法是用CSS的:first-letter,实现起来也不麻烦。

.dropcap:first-letter {font-size : 300%;font-weight : bold;float : left;margin-right: 3px;line-height:300%;}

为此，还有个首字下沉的wordpress插件。为了练手，想用jQuery实现看看，最后代码如下：

function dropcap() {
  $('#content .post .tease').each(function(index) {
	var paragraph = $('p',this)[0];
	var node = paragraph;
	while (node.childNodes.length) {
	  node = node.firstChild;
	}
	if (node.nodeValue) {
		var text = node.nodeValue;
		var first_letter = text.substr(0,1);
		if ( /[a-zA-Z]|[\u4e00-\u9fa5]/.test(first_letter) ) {
	 	 node.nodeValue = text.slice(1);
	 	 $("").addClass("dropcap").text(first_letter).prependTo( paragraph );
	 	 first_letter = '';
		}
	}
  });
}