字蛛是一个 WebFont 智能压缩工具,它能自动化分析页面中所使用的 WebFont 并进行按需压缩,通常好几 MB 的中文字体可以被压缩成几 KB 大小。
福利在最后。
特色:
- 支持绝大多数的中英文 Truetype 字体
- 支持开源图标字体库
- 支持 CSS 伪元素解析,支持 content: "string" 与 content: attr(value) 表达式
- 支持远程页面解析,并支持资源映射
- 支持四种样式规则: <style>、<link>、@import 、style=""
- 支持四种调用方式:命令行、Gulp、Grunt、JS Api
- 性能、稳定性大幅提高
输入 font-spider 命令,启动字蛛进行字体压缩:
压缩中文字体
一般方法是你可以直接安装 Node.js,然后使用 npm 安装字蛛,但是这个过程还需要安装一些编译工具,对于不熟悉命令行或者使用 Windows 的用户来说,这大概不是一个好方法。所以下面提供两种方法使用字蛛,一种是直接安装,另一种是使用已经打包好的字蛛镜像(Docker),通过 docker pull 镜像到本地直接使用。
方法一:直接安装
安装 NodeJS,然后安装字蛛:
npm install font-spider -g
在 CSS 中声明 WebFont:
切换到你写的 css 页面声明字体,方法与 CSS3 的 @font-face 方法类似。
/*声明 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';
}
注意:
- @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成。
- 开发阶段请使用相对路径的 CSS 与 WebFont
使用字蛛(路径不要有中文):
font-spider ./demo/*.html
方法二:使用 Docker 镜像
拉取镜像:
docker pull zuolan/font-spider
直接使用:
docker run -v /YOUR_HTML_FILES/:/work zuolan/font-spider font-spider /YOUR_HTML_FILES/*
Dockerfile 如下,不知道哪些可以在编译后删除所以暂时镜像还是挺大的,有空梳理一下依赖,去掉无关要紧的软件包。
FROM mhart/alpine-node
USER root
RUN apk add --no-cache python g++ make
RUN npm install -g font-spider
WORKDIR /work
# font-spider /html/*
字体分享
百度云:https://pan.baidu.com/s/1kVSFO3P
字体全部为非商用。