Smart webfont compression and format conversion tool
JavaScript HTML CSS
Latest commit fb3ad32 Sep 22, 2016 糖饼 添加贡献者名单
Permalink
Failed to load latest commit information.
bin 显示字符个数 May 20, 2016
src 删除空格 Sep 20, 2016
test 迁移gulp Sep 22, 2016
.gitignore 修改忽略配置 Aug 19, 2016
.jshintrc 更新配置文件 Apr 8, 2016
.npmignore 添加忽略的文件 May 7, 2016
.travis.yml 重命名配置文件 Apr 16, 2016
API.md 精简API文档 May 18, 2016
CHANGELOG.md 更新文档 Jul 29, 2016
LICENSE 开源协议 Apr 10, 2016
README-JA.md 更新文档 Sep 22, 2016
README-ZH-CN.md 添加贡献者名单 Sep 22, 2016
README.md 更新文档 Sep 22, 2016
package.json 迁移gulp Sep 22, 2016

README.md

font-spider

NPM Version NPM Downloads Node.js Version Build Status

[简体中文] | [English] | [日本語]

Font-spider is a compress tool for WebFont which can analyze your web-page intelligently to find the fonts out which have been used and then compress them.

字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。

フォント・スパイダー(font-spider)は、Webフォントを圧縮するためのスマートなツールです,Webページに使用されるWebフォントを分析し、必要に応じて圧縮することができます。


font-spider

Feature

  1. Font subsetter: Our tool is based on HTML and CSS analysis and completely running in local so that.
  2. Font converter: Support woff2, woff, eot, svg font format generation.

Install

npm install font-spider -g

Use

step one: code CSS

@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';
}

Attention: the ".ttf" file must be existed which is referred in src property of @font-face, and our font-spider will automatically generate other formats of font.

step two: compress WebFont by using font-spider

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

htmlFiles

One or more web-page addresses which support the http form.

Example:

font-spider dest/news.html dest/index.html dest/about.html

If there were several pages depend on the same fonts, please use --htmlFiles to transfer them in.

options

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

Options:

  -h, --help                    output usage information
  -V, --version                 output the version number
  --info                        show only webfont information
  --ignore <pattern>            ignore the files
  --map <remotePath,localPath>  mapping the remote path to the local
  --no-backup                   do not back up fonts
  --debug                       enable debug mode

sample of parameters usage

Use the wildcard character to compress the WebFont of several HTML file:

font-spider dest/*.html

--info Show the WebFont that has been used on the website:

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

--ignore Ignore the file:

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

--map This parameter will map the WebFont of online page to local and then compress it (the local path must be an absolute path):

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

Build plugins

API

See:API.md

Restrict

  • Only the constant texts and styles are supported, but not the dynamic elements and styles which is inserted by javascript.
  • The ".otf" format fonts should be transfered to ".ttf" format firstly, so that we can start our compressing work.
  • Only the HTML and CSS files which is encoded by utf-8 are supported.