font-spider

by aui

Smart webfont compression and format conversion tool

4.2K Stars 378 Forks Last release: about 5 years ago (v3.0.8) MIT License 453 Commits 5 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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] 

htmlFiles

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

Example:

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

options

Usage: font-spider [options] 

Options:

-h, --help output usage information -V, --version output the version number --info show only webfont information --ignore ignore the files --map 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

Limitations

  • 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.

[Link] 让 font-spider 支持 js 动态内容

[AD] 前端招聘:在海边写代码

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.