字蛛（font-spider）教学——ttf/otf字体文件压缩

最新推荐文章于 2025-01-13 14:54:51 发布

置顶像素检测仪

最新推荐文章于 2025-01-13 14:54:51 发布

阅读量7k

点赞数 5

分类专栏：前端文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_39981639/article/details/125158504

版权

前端专栏收录该内容

42 篇文章

订阅专栏

ttf/otf字体文件压缩

第一步、全局安装font-spider
第二步、准备好文件夹
第三步、在html和css文件中写入代码
第四步、压缩

注意：
在压缩前，先获取完整的、包含大多数文字的字体文件
在使用font-spider前，确保自己的电脑已安装node环境

第一步、全局安装font-spider

win+R打开cmd命令窗口，全局安装font-spider：

npm install font-spider -g

查看版本号，查看自己安装是否成功：

font-spider  -V

第二步、准备好文件夹

在项目外的地方准备一个空文件夹，空文件夹里放进一个html文件（或一个html文件和一个css文件），和完整字体文件
文件目录结构如下：
在这里插入图片描述
或

第三步、在html和css文件中写入代码

css部分可以写在css文件中，也可以直接写在html文件内

<!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">
    <title>Document</title>
    <!--link rel="stylesheet" href="./index.css"-->
    //style部分可以提取出来放在css文件中，使用link引入，也可以直接写在html文件内
    <style>
        @font-face {
  			font-family: 'myFont';//自定义字体名字
  			src: url('./myFont.otf')  format('truetype');//引入字体文件
  			font-weight: normal;
  			font-style: normal;
		}

        .myFont{
            font-family: 'myFont';
        }
    </style>
</head>
 
<body>
    <!-- 这里对应的是Bold的压缩包 -->
    //将想要提取的文字放在这里
    <h1 class="myFont">
        这里是你想要提取的文字
    </h1>
</body>
 
</html>