css3从入门到熟练运用（三）:炫目字体，多样背景和渐变颜色，神奇边框

字体

字体随处可见，网页上看到的任何字都包含字体的使用，怎么使用呢？
font-family 定义字体系列

传统字体

我们在开发一个互联网项目首先要做的就是字体选择，通常我们在设计的时候尽量去考虑系统默认的字体；而一个系统中通常会包含很多字体，一般如何选择呢？css 中 font-family 去实现。
比如：我们给一个div定义一个字体，如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替，如果都没有就让系统自动选择

div{
   
  font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
}

font-family 定义字体系列 可以在后面跟很多个，数目不限，实现顺序就是先用第一个，如果没有在去找第二个，以此类推，如果都没有就找系统的默认字体。
时代的进步，很多情况我们不喜欢系统为我们提供的字体，那怎么办呢？

自定义字体

css 3的出现允许自定义字体，也就说当系统没有字体的时候，可以自己下载，听上去很厉害，
css 3 给我们提供了一个 @font-face 可以从服务器导入字体，导入的字体可以自己随便命名
举例：自定义一个字体 比叫myfont ，然后应用在div上

@font-face
{
   
font-family: myfont ;  /* 自定义字体名称*/
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}
/* 调用自定义字体 应用到div中*/
div{
   
  font-family:myfont  /*调用定义好的字体名称*/
}

@font-face 两个基础属性是必须的：如上面的例子
font-family: 定义字体的名称 然后需要用到字体的地方调用
src ：后面的url 表示导入字体的路径可以是相对路径绝对路径
在div中用字体和传统方法一样直接使用即可

字体分栏

分栏效果就是像报纸一样一栏一栏的看一下示例：

实现这个效果可用div加上浮动布局float 属性也可以完成，但是浮动带来的问题是，高度要写死，并且还要清除浮动，因为他是脱离了文档流。
实现这个效果推