font-spider字体压缩工具完整使用指南

【免费下载链接】font-spider Smart webfont compression and format conversion tool 项目地址: https://gitcode.com/gh_mirrors/fo/font-spider

font-spider是一款智能的WebFont压缩工具，它能够自动分析网页中实际使用的WebFont字符，并按需进行压缩处理，从而大幅减小字体文件体积，提升网站加载性能。

项目概述

font-spider是一个基于HTML和CSS分析的字体子集提取工具，完全在本地运行。它支持生成woff2、woff、eot、svg等多种字体格式，是前端开发中字体优化的利器。

安装方法

通过npm全局安装font-spider：

npm install font-spider -g

核心功能使用

基础用法

1. 首先在CSS中定义@font-face规则：

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

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

注意：在@font-face的src属性中引用的.ttf文件必须存在，font-spider会自动生成其他格式的字体文件。

2. 使用font-spider压缩WebFont：

font-spider [options] <htmlFile1 htmlFile2 ...>

参数详解

基本参数：

• -h, --help：输出使用信息
• -V, --version：输出版本号
• --info：仅显示webfont信息
• --ignore <pattern>：忽略匹配的文件
• --map <remotePath,localPath>：将远程路径映射到本地
• --no-backup：不备份字体文件
• --debug：启用调试模式

使用示例

压缩多个HTML文件的WebFont：

font-spider dest/*.html

显示网站上已使用的WebFont信息：

font-spider --info http://fontawesome.io

忽略特定文件：

font-spider --ignore "icon\\.css$" dest/*.html

映射在线字体到本地并压缩：

font-spider --map "http://font-spider.org/font,/Website/font" http://font-spider.org/index.html

项目结构

font-spider/
├── bin/
│   └── font-spider
├── src/
│   ├── index.js
│   ├── adapter.js
│   └── spider/
│       ├── index.js
│       ├── web-font.js
│       ├── concat.js
│       └── utils.js
├── test/
│   ├── demo/
│   │   └── font-awesome/
│   │       ├── css/
│   │       └── fonts/
│   └── files/
│       ├── css/
│       └── *.html
├── package.json
├── README.md
├── README-ZH-CN.md
├── README-JA.md
├── CHANGELOG.md
├── API.md
└── LICENSE

构建插件支持

font-spider提供了多种构建工具的插件支持，可以轻松集成到现有的构建流程中。

API接口

font-spider提供了完整的API接口，开发者可以通过编程方式调用其核心功能。详细的API文档可以参考API.md文件。

使用限制

1. 仅支持静态文本和样式，不支持通过javascript插入的动态元素和样式
2. .otf格式的字体需要先转换为.ttf格式才能进行压缩
3. 仅支持使用utf-8编码的HTML和CSS文件

最佳实践

字体压缩优化策略：

• 确保font-spider扫描所有包含字体的页面
• 将font-spider集成到持续集成流程中
• 定期监控压缩前后的文件大小差异

注意事项：

• 在使用前检查HTML文件路径是否正确
• 确认字体文件具有适当的访问权限
• 对于复杂的项目结构，建议先进行测试验证

通过合理使用font-spider，你可以将字体文件体积减少90%以上，显著提升网站性能，特别是在移动设备上的用户体验。

【免费下载链接】font-spider Smart webfont compression and format conversion tool 项目地址: https://gitcode.com/gh_mirrors/fo/font-spider