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

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

相关阅读:
java数据结构
Swing有几种常用的事件处理方式？如何监听事件？
个人用户如何保证企业邮箱安全？【网易企业邮箱】
九泰智库 | 医械周刊- Vol.23
php不重新编译，添加模块
测试管理之一定条件下的测试管理
动态规划算法（3）--0-1背包、石子合并、数字三角形
【SI好文翻译】铜箔表面纹理对损耗的影响：一个有效的模型（四）
Linux初识+环境部署
「解决BUG」WIndows 开机进入桌面后一直闪屏刷新，无法打开资源管理器，菜单等界面

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