前端开发【特殊字体】特殊字体使用及font-spider优化加载时间

一、特殊字体引进

1、字体下载

下载地址：http://www.downcc.com/font/326030.html

2、字体引进

下载后解压缩并将资源放置到项目目录下；
在CSS中引进特殊字体引进：

@font-face {
font-family: SourceHanSansCN-Medium;
src: url('../ttf/SourceHanSansCN-Medium.ttf');
}
@font-face {
font-family: SourceHanSansCN-Regular;
src: url('../ttf/SourceHanSansCN-Regular.ttf');
}

4、对应模块使用特殊字体：

.style-main {
  font-family: SourceHanSansCN-Medium, serif;
  font-size: 16px;
  color:#2F2F2F;
}

二、加载时间优化问题

1、特殊字体加载缓慢

特殊字体库一般高达几十M，在HTML加载的过程中由于文字在字体库搜索和字体加载的问题往往会导致页面加载卡顿，加载时间久，往往出现图片先展现，文字迟迟加载不出来的现象，影响前端体验，一般需要进行优化

2、优化方式

优化方式有两种：
1）UI裁剪：字体库中仅保留HTML中出现的文字，但是这种做法的适用性极差，对于维护的要求也非常高，一旦前端代码出现变动，则需要重新裁剪，性价比极低。
2）font-spider：压缩字体，智能删除没有被使用的字形数据，大幅度减少字体体积，生成仅使用文字对应的文件。

三、font-spider

1、工作原理

从css文件@font-face查找字体，遍历html文件，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

4、安装指令

1）电脑需要安装node.js
2）通过node安装font-spider，cmd命令行执行
npm install font-spider -g

5、引进说明

在css通过 .ttf 文件，查找对应的文字并生成其他格式文件

 @font-face {
  font-family: SourceHanSansCN-Regular;
  src: url('../fonts/SourceHanSansCN-Regular.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/SourceHanSansCN-Regular.woff') format('woff'),
       url('../fonts/SourceHanSansCN-Regular.svg') format('svg'), /* iOS 4.1- */
       url('../fonts/SourceHanSansCN-Regular.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
}

6、运行 font-spider 命令

进入使用了特殊字体的HTML文件路径

cd 对应HTML文件路径位置
//*.html是对所有html文件执行该命令，你也可以写具体name的html*/
font-spider  *.html

命令执行完后，字体文件下多出来对应文件（.font-spider文件夹下是原始的ttf文件）