【font-spider】网页中引用字体文件过大的解决办法,网页字体文件压缩

font-spider(字蛛)官网:
字蛛
github源码

安装

先要安装npm与node
安装好之后就可以直接安装字蛛
我用了centos的服务器 用npm全局安装font-spider

# npm install font-spider -g

安装之后输入

# font-spider

看到下面的就说明安装成功了
font-spider安装成功

使用方式

首先要有项目中的html文件 在其外联的css样式中要规定字体文件
创建的css文件 我这里命名为css.css

在 CSS 中使用 WebFont:
@font-face{
	font-family:'汉仪乐喵体简';
	src:url(../HYLEMIAOTIJ.TTF);
}
body{
	font-family:"汉仪乐喵体简";
}

文件并不是全部都需要只要其中有一个就行。在生成新的字体文件的时候所有对应的格式都会生成
在html中外联这个css文件
font.html:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>main</title>
	<link rel="stylesheet" href="css/css.css">
</head>
<body>
	<div>这是测试的字1234567890!@#$%^</div>
</body>
</html>

在使用fonts-spider之前先cd到目标文件目录 就是你需要生成的新的字体文件的html目录
或者写全目录
使用font-spider生成:

# font-spider *.html

*是通配符 代表所有的html文件
输入之后回车开始生成:
font-spider生成完毕的文件
我这里由于测试的html中字少 所以字体文件只有8kb左右 实际情况下如果html中字的种类越多 生成的字体文件越大 但是绝对比原来的字体文件小很多
生成完毕的字体文件会代替原来的字体文件,而原来完整的字体文件会进入到当前目录下的一个叫.font-spider的隐藏文件中
font-spider生成之后的文件夹
开心。-。 以后再也不怕设计稿用个大段的特殊字体了。当然最好的解决办法就是尽量别在网页上用特殊字体!
角角兔 towrabbit
欢迎评论点赞哦

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值