web前端-javascript

【字蛛】如何压缩体积大的中文字体包

2020-04-03  本文已影响0人  老鼠AI大米_Java全栈

FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

安装

npm install font-spider -g

在html中使用字体

在 CSS 中声明字体
/*声明 WebFont*/
@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;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: ‘pinghei’;
}

压缩 WebFont

命令font-spider [options] <htmlFile …>

支持通配符,例如:font-spider dest/*.html

font.png

注意:实际上是把字体文件拷贝一个副本并把没有使用到的字体清除掉,从而减少字体文件大小。

Options

-h, –help 输出帮助信息
-V, –version 输出当前版本号
–info 仅提取 WebFont 信息显示,不压缩与转码
–ignore <pattern> 忽略的文件配置(可以是字体、CSS、HTML)
–map <remotePath,localPath> 映射 CSS 内部 HTTP 路径到本地
–debug 开启调试模式
–no-backup 关闭字体备份功能
–silent 不显示非关键错误
–revert 恢复被压缩的 WebFont

上一篇 下一篇

猜你喜欢

热点阅读