首页 > 代码库 > 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);}
同样,我们也可以做出一个带有火焰效果的特效:
* { 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"。 | 可选 |
font-style |
| 定义字体的样式。默认是 "normal"。 | 可选 |
font-weight |
| 定义字体的粗细。默认是 "normal"。 | 可选 |
unicode-range | unicode-range | 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 | 可选 |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。