因为页面需要,就去网上找了个字体下载使用,比如这个网站
但是下载下来的字体文件有近20MB,直接放到网页上需要加载很久,因为字体文件包含了几乎所有的中文字符,但是网页用不了那么多的字,所以下面使用 字蛛 工具对tff文件进行压缩,实际就是提取你网页中用到的汉字,然后根据原tff文件生成一个新的ttf文件、
我的目录如下
1.首先要安装node.js,然后使用下面命令安装 字蛛
npm install font-spider -g
2.在 CSS 中使用 WebFont, 我的base.css文件内容如下, .ttf 文件必须要有,其他的文件会自动生成
@font-face {
font-family: 'font-logo';
src: url('../font/font-jianhu.eot');
src:
url('../font/font-jianhu.eot?#font-spider') format('embedded-opentype'),
url('../font/font-jianhu.woff') format('woff'),
url('../font/font-jianhu.ttf') format('truetype'),
url('../font/font-jianhu.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.css-font {
font-size: 34px;
font-family: "font-logo";
}
PS:调用css尽量使用相对路径,比如: <link rel="stylesheet" href="./css/base.css">
3.运行命令生成新的 ttf 文件, *是匹配所有的html文件名字
font-spider ./*.html
最后生成的文件如下,原来ttf文件会备份到 .font-spider 文件夹中