CSS文字排版终极指南（3）

清晰的强调文字

下划线应该只用于文字链接，而斜体是一个更清晰的可选方案.

不正确的例子

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

正确的例子

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

first-letter与first-line

顾名思义，first-letter就是第一个字母，first-line是第一行文字，它们是少有的被所有主流浏览器支持的CSS 2.1 伪元素，你可以为它们定义任意样式。

示例代码

#demo5{ width:400px;}
#demo5:first-letter{ font-size:32px;color:green}
#demo5:first-line{color:red;}

前端观察 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

前瞻 – CSS3

已经有一部分很棒的CSS3特性可以用到你的设计中了。当然这些中的一部分新属性还不能用于IE，但是你或许了解这对IE来说是常事儿，所以你不妨试试。

@Font-face

@font-face允许你上次一个字体文件到你的网站服务器并将其引入到你的外部CSS文件中，然后就可以将它应用到你的网站的任何文字上。

这是处理文字的最大的功能，但是随之而来的是它的负面效果。由于版权问题，只有少数的字体“被允许”使用。这些字体也就是CSS3安全就在这里里面提到的。当然，对于中文字体来说，除了版权问题，还有网速的问题，一般中文字体动辄几MB的大小，字体文件下载到浏览器就要几分钟，这对于用户来说是不划算的。

使用@font-face

在这个例子中我在我的网站的根目录下放了一个font文件夹，然后将需要用到的字体放入该文件夹。你首先需要声明@font-face 属性以导入你的字体文件，然后使用该字体名称来控制其它元素的字体。

/* 声明字体 */
@font-face {
src:(font/diavlo.otf)
}
/* 将改字体应用到一个元素 */
h1 {font-family: diavlo, Arial;
}

PS:关于页面的嵌入字体，推荐阅读《如何在网页设计中使用个性化字体》

Text-Shadow

text-shadow属性赶走了用Photoshop为某些元素制作下拉阴影的需求，并给你提供动态的阴影控制。当然，该属性IE并不支持。

示例标题

p {
font-size: 2em;
font-weight: bold;
color: #777;
text-shadow: 1px 1px 1px #222;
}

示例标题2

p {text-shadow: 2px 2px 2px #222;}
p {text-shadow: 1px 1px 5px #FFF;}

挑战

本文中提到的这些技术都只是一个入门指南。试着采用并实现你喜欢的技术到你的设计中。排版可能是一个网站中最重要的部分，请不要无视它。

PS:本文在原文的基础上，补充了少量内容，比如first-letter和first-line部分——神飞

关于原作者

Shane Jeffers是Three Styles的创办者和作者。他对设计趋势和教程有独特的喜好。你可以通过这个联系页面和他联系到他或者在twitter上关注他 @ThreeStyles