首页 > 代码库 > CSS自学笔记(12):CSS3文字特效

CSS自学笔记(12):CSS3文字特效

在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);}

3D特效

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

* {	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-familyname规定字体的名称。必需定义
srcURL定义字体文件的 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-rangeunicode-range定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。可选