码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-13 18:26:27      阅读:316      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   io   strong   文件   

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

bubuko.com,布布扣

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

* {
	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;
}

bubuko.com,布布扣

在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"。 可选

CSS自学笔记(12):CSS3文字特效,布布扣,bubuko.com

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

标签:style   blog   http   color   使用   io   strong   文件   

原文地址:http://www.cnblogs.com/lonzhe/p/3910237.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!