css3系列之@font-face

@font-face

这个属性呢，必须设置在 css的根下，也就是说，不能设置在任何元素里面。

@font-face:

　　参数：

　　font-family:  给这个文字库 起个名字。

　　src: url()  format()

浏览器呢，是不具备解析 这种格式的文件的， 所以要调用 自身的系统来帮忙解析。 format 这个属性，就是方便 系统来识别这个文件的格式的。

例如  我们平常见的。 txt 文件， 那么系统打开这个文件， 是不是也要调用 记事本来打开它。

 

*{
    padding: 0;
    margin: 0;
}

@font-face{
    font-family: "name";                    /*给这个文字库 取个名字*/
    src: url('填需要加载的文字库') format('填说明文字库的 格式')   
}

    /* 一般来说，你引入的文字库，要兼容以下的 各种格式。 需要使用的话，直接copy 下面的代码， 把url 改了即可，*/
    /* 各种格式，在各种浏览器里 兼容情况不一样。 */
    /* url放入(文字库的链接) ，format 是说明这个格式的，方便浏览器调用系统解析 */
@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('diyfont.woff') format('woff'), /* chrome、firefox */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
body{
    font-family: 'name'  /* 直接引用 你设置的名字 */
}