压缩字体的工具font-spider

字蛛是一个中文字体压缩器。

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

  1. 安装 Node.js
    参照安装node.js

  2. 安装font-spider

npm install font-spider -g
  1. 使用。在 CSS 中使用 WebFont:
/*声明 WebFont*/
@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;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}
  1. 运行 font-spider 命令:
font-spider ./demo/*.html
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 相信很多做前端的都会遇到这一类问题,当前网页需要引入一些特殊字体,过去这些字体通常使用图片代替,不仅增加了requ...
    jskid阅读 12,903评论 1 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 缺点:使用外部字体,英文还好,只有26个字母,所以字体文件也不大(一个顶多就几百k),但是现在浏览器很多,字体文件...
    issac_宝华阅读 9,758评论 2 2
  • 1. 我曾经看到过这样一个段子: 话说在美国与墨西哥的边境线上,站着一位铁面无私,尽忠职守的好警察。 他每天检查过...
    樂鈫阅读 1,306评论 0 0
  • 从昨晚到现在,一直在看日剧,我个人认为这是在讨论物质化婚姻量算的可能性。 非常有意思的是,日本的就业生活压力也是非...
    真爱521阅读 3,663评论 0 0