关于css3 @font-face的使用从调用具体到加载速度的优化

　　最近在做移动端项目的时候发现自定义字体的使用过程中，渲染过程很慢，效果不好还不如直接用图片呢，就想着说既然出了这么一个好用的东西，怎么会有这种加载速度的问题呢。因为就开始了疯狂的百度。终于找到了解决方案。为了让后人乘凉，我决定总结一下这次使用font-face的整个过程。

　　首先还是把font-face的使用方法抛出：

　　1.下载ttf字体文件（网上直接搜索下载以华为行楷为例）：

　　　　　　进入 https://www.fontsquirrel.com/tools/webfont-generator 进行转换 可以下载到所需要的字体按照一下标注的顺序进行操作

　　2.引用自定义字体样式如下：（由于我是在移动端上使用所以其实只要 ttf就可以了 woff 是为了验证字体的转换功能）

 

@font-face {
    font-family: 'huawenxingkai';
    src:
             url('../fonts/huawenxingkai.woff') format('woff'), /* Modern Browsers */
             url('../fonts/huawenxingkai.ttf')  format('truetype'); /* Safari, Android, iOS */
   }

.title>span{color:#FFFFFF;font-family: 'huawenxingkai';display:inline-block;}

 

　　　3.　最终效果如下：

以为终于完成了，结果再移动端上运行起来后发现这效果太慢了啊，还不如图片。寻求度娘的帮助后找到了优化速度的方法（利用字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式）因此你首先得把你想要的字写入html并再样式中添加你想要加的自定义字体这也就是说每次你想添加新的中文字就得重新生成一次步骤如下

　　1.安装node.js

　　前往地址https://nodejs.org/en/download/进行下载脑残式安装下一步下一步一直到finish,

　　安装结束后的验证：cmd 输入path 验证是否存在node.js的路径了

　　2.安装font-spider

　　再上述界面上输入命令npm install font-spider -g 安装font-spider结束后我的界面是这样的以供参考

 

　　3.运行font-spider得到我们想要的文件

 继续执行命令 cd 此处加上文件夹的目录我的目录是：C:\Users\Administrator\Desktop\rjmoanew

具体引用了自定义字体的html呢？现在发挥他的作用了我的名字是登录页哦所以我输入：font-spider MoaLogin.html

成功返回结果

结果挺惊人的啊，从4M变成10k了这速度一下子就提升上去了，再用移动端看了下效果，几乎是秒现啊。到此完美落幕了