• css font字体瘦身

    日常开发中，可能会用到第三方的字体，有时候只是用到了第三方字体里的数字或者字母或者特定的字符，但是却要引用整个字体。动则10M+的字体，这对于网络带宽速度不快的人，通常都需要等个几秒字体才会被加载出来，非常影响用户体验。

    所以有咩有一种方法，可以把需要的字符提取出来，而不需要引用整个字体文件呢？

    答案是有的，机智的大佬早就贴心的造好了工具供我们使用；
    不废话了 直接上才艺：font-spider

    首先全局安装一个font-spider工具
    npm i -g font-spider
    检查工具是否安装成功
    font-spider -V

    新建一个项目，新增一个html文件，css文件以及需要提取的字体文件

    css文件

    引用字体

    @font-face {
	font-family: MiSans-Bold;
	src: url('../font/MiSans-Bold.ttf');
}
#txt {
	font-family: MiSans-Bold;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    index.html文件

    div#id里的内容即为你需要提取的字符，比如现在我需要提取里面的所有数字；

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div id="txt">0123456789</div>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    打开项目所在的文件夹，呼出CMD 输入命令
    font-spider ./index.html
    等待执行完成即可
    在这里插入图片描述
    字体即被替换成提取字符后的文件，原始字体文件在.font-spider文件夹内；
    原始字体文件7-8M， 提取后秒变2.58K 在这里插入图片描述
    更多api方法请看上面文档链接；

    E.G.M

  • 相关阅读:
    蓝桥杯每日一题2023.10.5
    windows11，OpenOCD 调试FPGA用作jtag
    狂神redis笔记02
    Debian12换镜像源
    创新能力｜如何用8D能力模型来提升产品经理的核心能力
    MongoDB(4.0.9)数据从win迁移到linux
    【双指针】Leetcode 11. 盛最多水的容器
    使用css 与 js 两种方式实现导航栏吸顶效果
    SpringCloud&Alibaba
    RMI协议详解
  • 原文地址：https://blog.csdn.net/ZhuAiQuan/article/details/126893253