css3自定义字体

以往的开发中，很多骚年想在前端H5页面使用些花里胡哨的字体，但苦于系统或移动设备上没有该字体导致辛苦意淫的代码无法按效果呈现。现在css3里引入@font-face规则，只需在css顶部声明规则，引入想用的字体文件（文件可以下载至服务器）即可。下面我简单敲一段儿：

一.寻觅到想用的字体文件。两种方式：

    1.去网站下载，推荐网站：http://www.fontsquirrel.com

   2.windows系统的话可以去系统文件里直接copy,个人觉得里面还是够用的：

 找到字体文件后，将其放到自己的项目结构中即可。

二.在css顶部声明规则：

//在字体调用前声明，建议放在css最顶部
@font-face{
    font-family: cuishoujia;//自定义字体名称
    src:url(../font/FZXZTFW_2.TTF);//引入字体文件
    font-weight: normal;//这个是必须设置的而且必须为normal
}

三.调用字体：

//应用自定义字体
.test{
    font-family:"cuishoujia";//上一步自定义的字体名称
    font-size: 50px;//其他样式 一如既往的写就ok了
    font-weight: bold;
}

至此，自定义字体就结束了，无论pc系统或移动设备本地是否支持该字体都能完美展示，下图ios-微信浏览器：