font-spider WebFont 压缩工具
2022-11-13 本文已影响0人
小贤笔记
下载 font-spider
npm install font-spider -g
注: 下载失败的话可使用淘宝镜像
npm config set registry http://registry.npm.taobao.org
新建一个 html 文件
注: 不要忘记引入下一步创建的 CSS 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入css文件 -->
<link rel="stylesheet" href="./ttf.css" />
</head>
<body>
<!-- 需要转换的文字放在标签内，只能压缩静态字体 -->
<p class="ttf">这里写入需要转换的内容</p>
</body>
</html>
新建一个 css 文件（处理的 ttf 文件）
@font-face {
font-family: 'source';
/* src 引入需要精简的 ttf 字体文件 */
src: url('./LiXuKeShuFa-1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.ttf {
font-family: 'source';
}
在当前目录下执行命令
注:
- 路径要找对, 目标是之前创建的那个 html 文件
- 处理成功后, 原字体文件会移入 .font-spider 目录内, 与 html 文件同级的是新字体文件
font-spider ./*.html
使用
将新的 ttf 文件放到样式文件中, 并使用
@font-face {
font-family: "myFont";
src: url("文件保存地址路径");
font-weight: normal;
font-style: normal;
}
.test {
font-family: "myFont";
}
