使用font-spider压缩字体文件

一、概述：

字蛛字体自动化压缩工具。官方网站：http://font-spider.org

(1)特性

轻巧：数 MB 的中文字体可被压成几十 KB

简单：完全基于 CSS，无需 js 与服务端支持

兼容：自动转码，支持 IE 与标准化的浏览器

自然：文本支持选中、搜索、翻译、朗读、缩放

(2)原理

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

构建 CSS 语法树，分析字体与选择器规则

使用包含 WebFont 的 CSS 选择器索引站点的文本

匹配字体的字符数据，剔除无用的字符

编码成跨浏览器使用的字体格式

二、安装

安装好 nodejs，然后执行：

npm install font-spider -g

三、使用范例

(1)在 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 规则与字符

不支持 CSS content属性插入的字符

(2)压缩 WebFont

font-spider [options] <htmlFile ...>

支持通配符，例如：font-spider dest/*.html

命令选项：

-h, --help                    输出帮助信息

-V, --version                 输出当前版本号

--info                        仅提取 WebFont 信息显示，不压缩与转码

--ignore <pattern>            忽略的文件配置（可以是字体、CSS、HTML）

--map <remotePath,localPath>  映射 CSS 内部 HTTP 路径到本地

--debug                       开启调试模式

--no-backup                   关闭字体备份功能

--silent                      不显示非关键错误

--revert                      恢复被压缩的 WebFont

四、实际操作

Font family: douyuFont
Original size: 5159.72 KB
Include chars: 我是支持该字体的文字内容
Chars length: 95
Font id: d30d27c8e4dc1bd294a75f2708eb4e96
CSS selectors: 
Font files:
File douyuFont-2.ttf created: 61.556 KB

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈