font-spider

Install the font-spider CLI globally using npm. Ensure you have Node.js installed on your system first.

npm install font-spider -g

To use font-spider, your CSS must include an @font-face declaration.

Requirement: The src attribute within @font-face must include a path to an existing .ttf file. Font-spider will automatically generate the other formats (e.g., .eot, .woff, .svg) based on the .ttf source.

/* Example CSS setup */
@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;
}

/* Apply the font to elements */
.home h1, .demo > .test {
    font-family: 'pinghei';
}

Before using font-spider, be aware of the following constraints:

• Dynamic Content: Only constant texts and styles are supported. Content or styles inserted via JavaScript are not detected.
• Font Formats: .otf files must be converted to .ttf format before starting the compression process.
• Encoding: Only HTML and CSS files encoded in utf-8 are supported.

If font processing is inaccurate, it may be due to CSS loading or parsing errors being ignored. To debug, set silent: false and debug: true in your options object.

// Use these settings to debug
{
    silent: false,
    debug: true
}

This example demonstrates the complete workflow: scanning an HTML file for font usage and then compressing the resulting fonts while keeping backups.

var fontSpider = require('font-spider');

fontSpider.spider([__dirname + '/index.html'], {
    silent: false
}).then(function(webFonts) {
    return fontSpider.compressor(webFonts, {backup: true});
}).then(function(webFonts) {
    console.log(webFonts);
}).catch(function(errors) {
    console.error(errors);
});

Use fontSpider.spider() to scan HTML files and retrieve WebFont description information.

Parameters:

• htmlFiles (Array<String>): A list of paths to the HTML files to be scanned.
• options (Object): Configuration options for the spidering process.
• callback (Function, optional): A callback function that receives the WebFonts description information. If omitted, the method returns a Promise.

/**
 * @param   {Array<String>}     网页路径列表
 * @param   {Object}            选项
 * @param   {Function}          回调函数。接收 `WebFonts` 描述信息
 * @return  {Promise}           如果没有 `callback` 参数则返回 `Promise` 对象
 */
fontSpider.spider(htmlFiles, options, callback)

Use fontSpider.compressor() to process font files based on provided WebFont description information.

Parameters:

• webFonts (Array<WebFont>): The WebFont description information (usually obtained from fontSpider.spider()).
• options (Object): Configuration options for the compression process.
• callback (Function, optional): A callback function that receives the WebFonts description information. If omitted, the method returns a Promise.

/**
 * @param   {Array<WebFont>}    `WebFonts` 描述信息
 * @param   {Object}            选项
 * @param   {Function}          回调函数。接收 `WebFonts` 描述信息
 * @return  {Promise}           如果没有 `callback` 参数则返回 `Promise` 对象
 */
fontSpider.compressor(webFonts, options, callback)

The compression process can be configured via an options object (passed as the adapter argument).

One primary configuration key is:

• backup: A boolean that determines whether the original font files are backed up before compression.

Compress.defaults sets backup: true by default.

Be aware of the following constraints when using font-spider:

• Dynamic Content: Only supports static text and styles. Elements or styles inserted via JavaScript are not supported.
• Font Formats: OpenType font support is incomplete.
• Encoding: Only supports utf-8 encoded HTML and CSS.
• CSS Content Property: The content property in CSS is only supported for plain text; it does not support functions like counter() or other advanced features.