字蛛的用法

news/2024/10/21 11:54:09/

官网网址为http://font-spider.org/

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

运行该程序,电脑需要先下载node应用程序,下载node步骤很简单,找到安装程序(nodejs百度云盘分享地址),按提示下一步下一步。。。最后安装完成

下载字蛛,全局安装

npm install font-spider -g

安装完毕,检查是否安装成功可以,font-spider  -V,查看版本,显示如下说明安装成功

特别注意的是,字蛛查看版本的命令一定要是大写的V

使用字蛛

在css文件中使用 WebFont:

/*声明 WebFont*/
@font-face {font-family: 'pinghei';src: url('../font/pinghei.eot');src:url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),url('../font/pinghei.woff') format('woff'),url('../font/pinghei.ttf') format('truetype'),url('../font/pinghei.svg') format('svg');font-weight: normal;font-style: normal;
}/*使用选择器指定字体*/
.home h1, .demo > .test {font-family: 'pinghei';
}

官方提醒注意事项:

1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成

2. 开发阶段请使用相对路径的 CSS 与 WebFont

运行 font-spider 命令

font-spider ./demo/*.html

———————————————————————————————————————————————————————-—

举例说明如下:

运行成功后你会发现,font文件夹会把你之前的很大的ttf文件备份在新生成的.font-spider文件夹下,在font文件夹下生成好几个压缩的很小的字体文件,可自行查看文件大小。如图:

注意:我第一次测试一直也没有成功,也没有任何报错,我怀疑是之前运行的代码有缓存,第二次运行一下就成功了,所以如果没有任何报错的前提下没有成功,建议多建几个案例尝试下!


http://www.ppmy.cn/news/461282.html

相关文章

各大搜索引擎蜘蛛名称

1、百度蜘蛛:Baiduspider网上的资料百度蜘蛛名称有BaiduSpider、baiduspider等,都洗洗睡吧,那是旧黄历了。百度蜘蛛最新名称为Baiduspider。日志中还发现了Baiduspider-image这个百度旗下蜘蛛,查了下资料(其实直接看名字就可以了……),是抓取图片的蜘蛛。常见百度旗下同…

字蛛使用

先贴字蛛官网:http://font-spider.org/ 1、想要用到字蛛首先要安装node 或者有 git 也可以; 2、安装好之后就开始字蛛的安装,git复制这句:npm install font-spider -g 3、接着一大堆乱七八糟的不用看懂;打开你做好的h…

蛛网模型探究

模型描述 经济模型描述 符号说明 符号意义 k k k表示第k个时段(把时间离散化为时段,1个时段相当于商品的1个生产周期) x k x_k xk​第 k k k时段商品的数量为 x k x_k xk​ y k y_k yk​第 k k k时段商品的价格为 y k y_k yk​ f f f需求曲线 h h h…

Sekiro(只狼)

http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId6027 #include<stdio.h> int main()///int型足够用了 {int n,k,t;scanf("%d",&t);while(t--){scanf("%d%d",&n,&k);if(n0){printf("0\n");continue;}///一定得c…

是狼人类

任务描述 本关任务&#xff1a;采用多继承设计一个狼人类。 相关知识 在前面的关卡中&#xff0c;我们学习的派生类都只有一个基类&#xff0c;称为单继承。除此之外&#xff0c;C 也是支持多继承的&#xff0c;即一个派生类可以有两个或多个基类。下面我们就一起来学习多继…

Thinkpad X1 Carbon 已插入未充电解决办法

问题 连接电源后无法充电。 网上搜索解决办法都是过时的拆电池那一套&#xff0c;对于X1C无效。 解决办法 拔出电源重启进入boot&#xff0c;也就是开机时按F1&#xff08;或者Fn加F1同时按下&#xff09;找到Power菜单激活选项"Disable built-in battery" &#…

联想ThinkPad x1carbon 7th,i5 8265安装win7踩过的坑

最近有人让我给这台电脑装win7&#xff0c;预装的是win10的系统&#xff0c;看了下配置&#xff0c;觉得应该没什么问题&#xff0c;可装的时候遇到了很多坑&#xff0c; 首先&#xff0c;我们正常就是修改bios为uefi然后再把硬盘格式改成mbr&#xff0c;然后直接安装就可以了&…

x1c 语言设置,创新经典平衡点 ThinkPad X1Carbon评测

【IT168 评测】当我们需要借助电脑来进行一次现代化办公的时候&#xff0c;我们需要的究竟是什么?是运行速度、是安全性与稳定性、是输入的手感与屏幕的质量、还是简简单单的只需要轻薄随身而已。小编相信大多数真正每天都在进行数字办公的人们会回答“都需要”。而这个时代特…