font-spider 压缩字体使用

使用背景：
前端开发中，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>Documenttitle>
    <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

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>Documenttitle>
    <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

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

	@font-face {
		   font-family: 'HYLuoHuaShiW';
		   src: url("./HYLuoHuaShiW.ttf");
		 }
		 
1
2
3
4
5

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

访问浏览器效果：
在这里插入图片描述

相关阅读:
SpringBoot利用证书实现https双向绑定并解析客户端证书
Google Earth Engine（GEE）——Landsat 全球土地调查 1975年数据集
NC26 括号生成
【NOI模拟赛】Anaid 的树（莫比乌斯反演，指数型生成函数，埃氏筛，虚树）
【送书活动】全网超50万粉丝的Linux大咖良许，出书了！
第八单元 Linux系统引导过程及引导修复
Spring学习笔记12 面向切面编程AOP
优秀开源项目解读(六
Mac电脑专业音乐制作Logic Pro X中文
JAVA培训之连接查询之子查询

原文地址：https://blog.csdn.net/weixin_43444977/article/details/126886261