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

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

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

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

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

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

  1. * {
  2. color: #FFF;
  3. 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);
  4. }

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

  1. * {
  2. text-align: center;
  3. margin: 100px auto;
  4. font-size: 80px;
  5. color: #FFF;
  6. 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;
  7. }

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

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

  1. @font-face{
  2. font-family: MyFont;
  3. src: url('Sansation_Light.ttf');
  4. }
  5. }
  6. *{
  7. font-family: MyFont;
  8. }

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

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文字特效的更多相关文章

  1. JAVA自学笔记12

    JAVA自学笔记12 1.Scanner 1)JDK5后用于获取用户的键盘输入 2)构造方法:public Scanner(InputStream source) 3)System.in 标准的输入流 ...

  2. CSS自学笔记(10):CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  3. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  4. CSS自学笔记(16):CSS3 用户界面

    CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸.轮廓等等. 新增的部分属性的浏览器支持情况 属性 浏览器支持 resize IE Firefox Chrome Safa ...

  5. CSS自学笔记(15):CSS3多列布局

    在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性 浏览器支持 column ...

  6. CSS自学笔记(14):CSS3动画效果

    在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...

  7. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  8. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  9. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

随机推荐

  1. C++程序设计实践指导1.8求指定范围内的所有素数改写要求实现

    改写要求1:以指针为数据结构动态开辟存储空间 #include <cstdlib> #include <iostream> using namespace std; class ...

  2. vs2012配置opencv及简单测试

    为visual studio2012搭建openCV平台,实现打开图片. 实现步骤: 1.1.配置环境变量 基于win7操作系统的环境配置步骤: 1.1.1 计算机—>属性—>更改设置—& ...

  3. python 2.6升级到2.7

    CentOS 6.5上安装的python版本是2.6.6,不能满足我运行软件的要求,所以对python进行升级. 原以为这也就是安装个软件的事儿,在我求稳搜索一下了之后发现,也并不是那么单纯简单. 下 ...

  4. java性能优化技巧

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1. 尽量使用final修饰符. 带有final修饰符的类是不可派生的. ...

  5. 当 IDENTITY_INSERT 设置为 OFF 时,不能为表 'tb_MyInvoices' 中的标识列插入显式值

    默认情况下,IDENTITY_INSER就是off 这种情况下,你写insert 语句时,identity栏位,不要写值,系统会自动帮你写入. 举例说明: ,),dt datetime,pay int ...

  6. Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑

    判断两个变量是否相等在任何编程语言中都是非常重要的功能. JavaScript 提供了 == 和 === 两种判断两个变量是否相等的运算符,但我们开始学习的时候 JavaScript 的时候,就被一遍 ...

  7. 怎么让一个非窗口组件可以接受来自Windows的消息

    为什么要这样做? 有时候我们需要一个非窗口组件(比如一个非继承自TWinContrl的组件)可以接受Windows消息.要接受消息就需要一个窗口句柄,但是非窗口组件却没有句柄.这篇文章将讲述怎么让一个 ...

  8. Android doGet方法

    DefaultHttpClient httpclient = new DefaultHttpClient(); HttpGet httpget = new HttpGet("http://w ...

  9. 实用的PHP正则表达式

    正则表达式是程序开发中一个重要的元素,它提供用来描述或匹配文本的字符串,如特定的字符.词或算式等.但在某些情况下,用正则表达式去验证一个字符串比较复杂和费时.本文为你介绍10种常见的实用PHP正则表达 ...

  10. Eclipse Velocity插件安装

    打开eclipse安装velocity插件,这里有两种eclipse velocity的安装 方式一:不推荐的安装(安装会失败) Help>install new software>add ...