Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lete114/fontmin-spider
Analyze which fonts are used on the page and eliminate the ones that are not used to get a smaller font file
https://github.com/lete114/fontmin-spider
Last synced: 14 days ago
JSON representation
Analyze which fonts are used on the page and eliminate the ones that are not used to get a smaller font file
- Host: GitHub
- URL: https://github.com/lete114/fontmin-spider
- Owner: Lete114
- Created: 2023-01-13T09:10:47.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-24T08:11:15.000Z (over 1 year ago)
- Last Synced: 2024-10-12T21:14:23.921Z (about 1 month ago)
- Language: TypeScript
- Size: 4.44 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fontmin-spider
Analyze which fonts are used on the page and eliminate the ones that are not used to get a smaller font file
## Install
```bash
npm install fontmin-spider
```
## Usage
```js
const { spider, parse } = require('fontmin-spider')
;(async () => {
const basePath = '/home/site/'
// Recursively read all html files in the /home/site/ directory
// default: **/*.html
await spider({ basePath })
/*
// css
p {
font-family: 'fontName';
}
// html
Analyze which fonts are used on the page and eliminate the ones that are not used to get a smaller font file
*/
const files = ['/home/site/index.html', '/home/site/post/index.html', '/home/site/page/index.html']
// It only parses, it does not compress
const fontMaps = parse(basePath, files)
console.log(fontMaps)
/*
{
fontName: {
selector: [ 'p' ],
path: '/home/site/font/font-file.ttf',
chars: 'Analyzewhicfotsrudpgm'
}
....
}
*/
})()
```
This is an example: compress only specified characters, e.g. only [CJK](https://wikipedia.org/wiki/CJK_characters) (CJK Unified Ideographs) characters
```js
const { spider } = require('fontmin-spider')
function getCJK(str: string) {
const reg =
/[\u4e00-\u9fa5\u3040-\u30ff\u31f0-\u31ff\uff00-\uff9f\u3000-\u303f\uff01-\uff0f\uff1a-\uff20\uff3b-\uff40\uff5b-\uff60\uffe0-\uffe6]/g
const cjkChars = str.match(reg)
return cjkChars ? cjkChars.join('') : ''
}
;(async () => {
const basePath = '/home/site/'
// Recursively read all html files in the /home/site/ directory
// default: **/*.html
await spider({
basePath,
/**
* Execute the filter function after parsing is complete
* @param { { selector: string[]; path: string; chars: string } } declaredFamilyMap Font parameters
*/
afterFilter(declaredFamilyMap) {
for (const [, value] of Object.entries(declaredFamilyMap)) {
value.chars = getCJK(value.chars)
}
}
})
})()
```
## API
### spider(options)
Crawl the fonts referenced by the specified .html file for compression.
matching the text used according to the css selector, compressing on demand
#### options.basePath
Type: `string`
Required: `true`
You can think of it as the root of the website
### options.source
Type: `string | string[]`
See [fast-glob](https://github.com/mrmlnc/fast-glob#patterns) for details
### options.backup
Type: `boolean`
Default: `true`
backup font (font.backup.ttf)
### options.reserveText
Type: `string | object`
Reserved text. For example, when using JavaScript to add text dynamically.
the fontmin-spider will not be able to parse the text and you will need to add the reserved text manually
```js
const { spider, parse } = require('fontmin-spider')
;async () => {
const basePath = '/home/site/'
// Even if 'ABCDEFG' is not used, 'fontmin-spider' does not eliminate it and remains in the font file
await spider({ basePath, reserveText: 'ABCDEFG' })
// Settings for specific fonts only
/* p {
font-family: 'fontName';
}
*/
await spider({ basePath, reserveText: { fontName: 'ABCDEFG', fontName2: '1234567890' } })
}
```
### options.ignore
Type: `string[]`
See [fast-glob](https://github.com/mrmlnc/fast-glob#ignore) for details
### parse(basePath, files)
#### basePath
Type: `string`
Required: `true`
You can think of it as the root of the website
#### files
Type: `string[]`
Required: `true`
Array type html file (absolute path)
#### filter
Type: `Function`
Required: `false`
Execute when all the used fonts are parsed (the strings are not parsed, you can use the afterFilter method if you need to process the strings)
#### afterFilter
Type: `Function`
Required: `false`
After parsing is complete, execute