卡尔博客-代码笔记

网页中用到很多的特殊字体, 需要客户端安装字体还有客户端浏览器也支持字体, 客户端我们是不能确定的, 所以出现很多字体加载不了。
可以在css出添加`@font-face{}`让客户端流量器自动加载字体文件， [字体免费下载链接](https://www.fontke.com/ "字体免费下载链接")
不过一般下载都是完整的字体文件, 体积比较大, 这样使页面加载会很慢。

##### 我们可以用字蛛这款神器来压缩字体, 它的原理是先将完整的字体包加载后, 根据网页页面对应存在的字体进行保留, 其余的字体删除,从而起到一个压缩效果, 它还会帮你自动备份原理完整的字体文件。

#### [字蛛官网链接](http://font-spider.org/ "字蛛官网")
![](http://font-spider.org/img/banner-img.png)

使用流程:
###### 1.用node.js安装字蛛
`npm install font-spider -g`
###### 2.css用 `@font-face` 引入字体
```css
例如： 
/* 汉仪力量黑字体 */ 
@charset “UTF-8”; 
@font-face { 
	font-family: “HYLiLiangHeiJ”; /*字体命名*/
	src: url(“../fonts/HYLiLiangHeiJ.woff”) format(“woff”), 
	url(“../fonts/HYLiLiangHeiJ.ttf”) format(“truetype”), 
	url(“../fonts/HYLiLiangHeiJ.eot”) format(“embedded-opentype”), 
	url(“../fonts/HYLiLiangHeiJ.svg”) format(“svg”), 
	url(“../fonts/HYLiLiangHeiJ.otf”) format(“opentype”); 
	font-weight: normal; 
	font-style: normal; 
}
/*使用选择器指定字体*/
.home h1, .demo > .test { 
    font-family: 'HYLiLiangHeiJ';/*直接应用*/
}
//可引入单个或多个同类字体但不同类型的文件
//注意: 其中 ttf 类型的字体必须引入, 其他类型可有可无
```

###### 3.node.js执行字蛛压缩命令
`font-spider D:\fe\panda\Holland\*.html`(font-spider空格加html的路径地址)

正常就会loading 进行压缩了, 成功后出现对应字体文件的体积大小
![](/editor/uploads/2019-01-24_2449.png)

###### 4.，注意问题： 
下载的字体包文件名改为英文，css文件引用的时候也改成同字体包一样的英文名；

css表中eot和opentype格式先注释掉，不然压缩会提示错误，字蛛暂不支持这两种格式，压缩完 后把eot和

opentype格式复原（不复原在手机上测试字体未生效）；

代码笔记

web特殊字体,字蛛字体压缩