如何压缩中文字体的大小我们在网站中为了达到更美观的效果。往往需要嵌入自定义字体，但是中文字体由于字数庞大导致整个字体包就

我们在网站中为了达到更美观的效果。往往需要嵌入自定义字体，但是中文字体由于字数庞大导致整个字体包就会很大；很影响页面的加载速度。那有什么办法即能使网站展示美观的字体，又提升字体的加载速度呢？幸运的是字蛛从没某种意义上能解决这个问题；

字蛛

字蛛（font-spider），一个智能 WebFont 压缩工具！它能自动分析出页面使用的 WebFont 并进行按需压缩。

官网：font-spider.org/

源码：github.com/aui/font-sp…

安装

npm install font-spider -g

运行

font-spider ./demo/*.html 页面依赖的字体将会自动压缩好，原 .ttf 字体会备份；

使用

1.声明 WebFon

@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

2.使用选择器指定字体

.home h1, .demo > .test {
    font-family: 'pinghei';
}

注意事项

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。如果页面是动态渲染的，无法知晓页面中会有哪些字的时候将无法提前编译好字体包；当然你也可以提前预知会有哪些字进行编译（例如可以先编译3500个中文常用字）；