日常开发中,可能会用到第三方的字体,有时候只是用到了第三方字体里的数字或者字母或者特定的字符,但是却要引用整个字体。动则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;
}
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>
打开项目所在的文件夹,呼出CMD 输入命令
font-spider ./index.html
等待执行完成即可
字体即被替换成提取字符后的文件,原始字体文件在.font-spider文件夹内;
原始字体文件7-8M, 提取后秒变2.58K
更多api方法请看上面文档链接;
E.G.M