用字蛛压缩ttf字体文件

最新推荐文章于 2024-09-21 21:55:40 发布

ministar丶

最新推荐文章于 2024-09-21 21:55:40 发布

阅读量2.1k

点赞数

分类专栏： web前端-h5

本文链接：https://blog.youkuaiyun.com/u013322594/article/details/87933709

版权

web前端-h5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用字蛛工具进行TTF字体文件的压缩。首先，需要全局安装字蛛；接着，创建一个名为test的文件夹，并编写font.css和index.html文件；然后，进入test目录，运行特定命令；最后，会在font文件夹下生成压缩后的字体文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载字蛛，全局安装

   npm install font-spider -g

2. 创建一个自己的文件夹如 test

包含下面三个目录
1. css文件夹 (font.css)
2. font文件夹 (字体1.ttf,字体2.ttf)
3. index.html

3. font.css

@font-face {
  font-family: 'sf-pro-text_regular';  
  src:  url('../font/sf-pro-text_regular.ttf') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sf-pro-text_semibold';  
  src:  url('../font/sf-pro-text_semibold.ttf') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

body{
	font-family:"sf-pro-text_regular";
}

.tt1{
	font-family: 'sf-pro-text_regular';  
	font-size: 24px;
	color: #333;
}

.tt2{
	font-family: 'sf-pro-text_semibold';  
	font-size: 24px;
	color: #333;
}

4. index.html

<html>
<head>
	<link rel="stylesheet" href="css/font.css">
</head>
<body>
<p class="tt1">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890.:,;'"(!?)+-*/=</p>
<p class="tt2">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890.:,;'"(!?)+-*/=</p>
</body>
</html>

5. 进入test目录下运行如下命令

font-spider ./*.html

6.font文件夹下会生成对应的压缩字体文件

font文件夹下的 .font-spider 文件夹里是原字体文件