CSS自学笔记（12）:CSS3文字特效

浏览数：23 / 时间：2015年06月09日

在CSS3中新增了多个文本属性，同样有了这些属性我们在进行问题特效处理时，就尽可能少的用到其他软件去制作特效文字了。

在以前使用CSS进行web开发的时候，必须使用计算机上安装好的字体，如果有些用户的计算机上未安装该字体，可能会达不到开发人员的预期效果。而通过CSS3，开发人员可以使用他们喜欢的任意字体，只要将需要的字体文件放到web服务器上就OK了。

注：现在的主流浏览器不支持部分新增属性。

最简单的文本特效就是给文本添加阴影了。

可以给文本添加水平偏移值、垂直偏移值和模糊半径，也可以定义阴影的颜色。

我们可以定义不同的阴影可以达到很多效果，例如我们可以做出一个带有立体感的文字：

* {
	color: #FFF;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
}

同样，我们也可以做出一个带有火焰效果的特效：

* {
	text-align: center;
	margin: 100px auto;
	font-size: 80px;
	color: #FFF;
	text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

在CSS3中也添加定义自动换行的属性(word-wrap属性)，让我们自己来对文本进行换行。但是用word-wrap属性换行时，可能对一个单词进行拆分处理。

通过CSS3，web开发人员再也不用担心字体的问题了，可以使用我们喜欢的任意字体，通过@font-face定义就可以了。

@font-face{
	font-family: MyFont;
	src: url(‘Sansation_Light.ttf‘);
	}
}
*{
	font-family: MyFont;
}

注:有些中文字体文件较大，应尽量避免使用。

CSS3 字体描述符

CSS3中 @font-face 规则中定义的所有字体描述符：

描述符	值	描述	备注
font-family	name	规定字体的名称。	必需定义
src	URL	定义字体文件的 URL。	必需定义
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	定义如何拉伸字体。默认是 "normal"。	可选
font-style	ormal italic oblique	定义字体的样式。默认是 "normal"。	可选
font-weight	normal bold 100 200 300 400 500 600 700 800 900	定义字体的粗细。默认是 "normal"。	可选
unicode-range	unicode-range	定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。	可选