网站多处使用中文特殊字体，而导入字体文件随便十几M，做成图片又不好维护，介绍一个简单实用的字体压缩工具。

中文字体压缩器——字蛛

css font-face 引入中文字体必备神器

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

中文 WebFont 自动化压缩工具。官方网站：http://font-spider.org

1、安装

安装nodejs

先安装nodejs，传送门：http://nodejs.org
安装font-spider

安装好nodejs后执行

npm install font-spider -g

windows 需要安装 perl 环境才可以运行。
GruntJS 用户可使用 gruntjs 插件。

2、使用

在 CSS 中声明字体

/*声明 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';
}

@font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
开发阶段请使用 相对路径 的 CSS 与 WebFont

压缩

执行font-spider命令

font-spider dest/*.html （此处不要用gitbash等工具执行，直接cmd）

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份

源码：github.com/aui/font-spider
感谢：@zhangge

中文字体压缩器——字蛛相关推荐

中文字体压缩器并且转换(推荐阅读)
字蛛是一个中文字体压缩器官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题使用方法: npm i -g font-spider 在 ...
字蛛（FontSpider，中文字体压缩器）网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
字体文件压缩 - font-spider (字蛛)
优化加载速度, 压缩字体文件安装: npm install font-spider -g 查看版本: font-spider -v 1. 新建一个fonts文件 2. fonts下新建index. ...
html 中文字体文件太大,【字蛛】如何压缩体积大的中文字体包
FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压 ...
字体文件压缩——字蛛(FontSpider)
简介字蛛(FontSpider) 是一个中文字体压缩器: 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器 ...
字蛛的用法以及遇到的问题
字蛛是一个中文字体压缩器,可以压缩字体文件,从而解决加载缓慢的问题.字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成 ...
字蛛压缩ttf字体（前端常用）
!!!压缩的只有调用字体的文字字蛛压缩后有些文字不起作用字蛛在压缩过程中只将调用字体的文字进行压缩,其他文字将不被压缩 1.准备在页面中引用字体 <html><head> ...
使用字蛛实现字体压缩
一.安装 1.安装 node 在使用字蛛压缩字体之前,需要安装 Node.js.下载地址如下 https://nodejs.org/en/ 下载完后,一路下一步安装安装完后,win+R 输入 nod ...
如何解决中文字体加载缓慢的问题？
问题: html页面外部倒入中文字体文件,字体文件太大导致网站上线后,页面的字加载缓慢出现一系列bug 解决方法: 网上在线云字体 [有字库],直接在线引用,不用下载 https://www.webf ...

中文字体压缩器——字蛛

网站多处使用中文特殊字体，而导入字体文件随便十几M，做成图片又不好维护，介绍一个简单实用的字体压缩工具。

中文字体压缩器——字蛛

css font-face 引入中文字体必备神器

1、安装

2、使用

中文字体压缩器——字蛛相关推荐

最新文章

热门文章