font-spider 压缩字体使用

最新推荐文章于 2024-03-07 10:12:57 发布

歌声缓缓

最新推荐文章于 2024-03-07 10:12:57 发布

阅读量702

点赞数

分类专栏： JavaScript HTML 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43444977/article/details/126886261

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

使用背景：
前端开发中，UI图需要特殊字体，字体是固定的，不是接口返回来的，可以使用font-spider，字体文件只有你需要的文字，使字体文件只要几K

准备工作：
1、node环境
2、字体文件（比如 .ttf）
3、需要用到的文字的HTML文件，
如下：test.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>
    <style>
        @font-face {
            font-family: op-design;
            src: url('./HYLuoHuaShiW.ttf') format('truetype');
        }

        .text {
            font-family: op-design;
            font-size: 40px;
        }
    </style>
</head>
<body>

<div class="text">
    <span>0123456789！</span>
    <span>亲爱的你好今天是你的生日</span>
</div>

</body>
</html>

开始工作
在这里插入图片描述

1、安装
在当前目录下，执行npm install font-spider -g
2、在test.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>
    <style>
        @font-face {
            font-family: op-design;
            src: url('./HYLuoHuaShiW.ttf') format('truetype');
        }

        .text {
            font-family: op-design;
            font-size: 40px;
        }
    </style>
</head>
<body>

<div class="text">
    <span>0123456789！</span>
    <span>亲爱的你好今天是你的生日</span>
</div>

</body>
</html>

3、执行font-spider test.html 命令
会发现，你的ttf字体文件从几兆变成了几k

4、在你的开发文件里，引入生成的压缩的文件
先申明 font-face

	@font-face {
		   font-family: 'HYLuoHuaShiW';
		   src: url("./HYLuoHuaShiW.ttf");
		 }

使用字体的时候，就可以用了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
<body>
   <div class="wrap">
		亲爱的 <br/>
		你好  <br/>
		今天是你的生日
   </div> 
   
   
   
   <script>
            
   </script>
   
   
   
   <style>
		@font-face {
		   font-family: 'HYLuoHuaShiW';
		   src: url("./HYLuoHuaShiW.ttf");
		 }
      .wrap{
		 font-family: 'HYLuoHuaShiW';
	  }
        
    </style>
 
</body>
</html>