字体压缩神器font-spider的使用
前言：
很多时候项目会遇到需要引入外部字体，不管是vue,小程序，react等等，但是pc端项目还好，把源文件放我们本地是可以的，小程序就不行了，因为体量比较小，对大小有限制。
font-spider 字蛛 官网地址：最好有翻墙软件，不然太慢了，大概率不成功
font-spider.org -
http://ww1.font-spider.org/
具体使用：
1、全局安装插件
npm install font-spider -g2、检查有没有安装成功
font-spider -V3、打开你的目录，找到你的源文件在的文件夹，比如我的
4、新建一个index.html，
注意LouisVuittonGlobal-Regular 等名字换成你自己的源文件
<!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,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>font spider</title><style>@font-face {font-family: 'LouisVuittonGlobal-Regular';src: url('./LouisVuittonGlobal-Regular.eot');src:url('./LouisVuittonGlobal-Regular.eot?#font-spider') format('embedded-opentype'),url('./LouisVuittonGlobal-Regular.woff') format('woff'),url('./LouisVuittonGlobal-Regular.ttf') format('truetype'),url('./LouisVuittonGlobal-Regular.svg') format('svg');font-weight: normal;font-style: normal;}.medium {font-family:'LouisVuittonGlobal-Regular';}@font-face {font-family: 'LV_Global_Demi';src: url('./LV_Global_Demi.eot');src:url('./LV_Global_Demi.eot?#font-spider') format('embedded-opentype'),url('./LV_Global_Demi.woff') format('woff'),url('./LV_Global_Demi.ttf') format('truetype'),url('./LV_Global_Demi.svg') format('svg');font-weight: normal;font-style: normal;}.bold {font-family:'LV_Global_Demi';}</style>
</head><body><div><!-- 这里对应的是Bold的压缩包 --><div class="bold">abcdefghijklmnopqrstuvwxyz</div><!-- 这里对应的是Medium的压缩包 --><div class="medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div><!-- 这写在class元素之外的就没有对应的压缩包了 -->0123456789</div>
</body></html>5、右键打开cmd弹框，或者powershell弹框，执行命令
font-spider index.html6、可以看到下面的界面，源文件2M，压缩以后是60k左右，还有其他格式可以用
7、美滋滋把，用起来，css引入：
@font-face {font-family: 'LouisVuittonGlobal-Regular';src: url("../fonts/LouisVuittonGlobal-Regular.ttf") format('truetype'); //主要是这句话font-weight: normal;font-style: normal;
}字体压缩神器font-spider的使用相关推荐
- 中文字体压缩器——字蛛
网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器 字蛛通过分析本地 C ...
- HTML字体以及图标字体iconfont、Font Awesome的使用
字体 • 通过font-family可以指定标签中文字使用的字体. • 例如: p{font-family:Arial} 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户 ...
- 导入外部字体且带字体压缩，以及判断h5，app，微信小游戏环境和字体的具体实现方式（egret为例）
1.压缩字体方式 因为一般项目中不需要用到所有字体,所以需要将需要的字体在字体包提取出来重新打字体包 我选择的压缩字体方式是 :使用fontmin进行字体压缩 fontmin官网为: https:// ...
- 拖拽批量上传图片如何保证 顺序_图片压缩神器和图片分割工具，美工设计和运营终于得救了...
想要快速互联网干货技巧? 请(置顶)星标我们 好不容易写好文案,设计好长图海报,上传到微信公众号,竟然提示上传图片体积不得超过5M,怎么办?怎么办? 不得已,只好又返回Ps里降低图片品质,换成有损格式 ...
- 中文字体压缩器并且转换(推荐阅读)
字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...
- 字蛛（FontSpider，中文字体压缩器）网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
- android系统自带字体设置,安卓手机系统字体设置-系统字体设置(Big Font) 安卓版v2.37-PC6安卓网...
Big Font 改变系统字体大小:这个软件可以直接修改安卓系统字体的大小,相比原生系统的大中小肯那个还不能完全符合所有人.这个软件还不错. 官方介绍 透过改变系统字体大小Big Font应用,你可以 ...
- ireport4.5在JVM中添加新字体解决方案（Font ‘標楷體‘ is not available to the JVM. See the Javadoc for more details.）
ireport4.5在JVM中添加新字体解决方案(Font '標楷體' is not available to the JVM. See the Javadoc for more details.) ...
- java font 字体库,「Font」- 编程字体 @20210209
问题描述 该笔记将记录:与编程字体有关的内容,以及我们使用过的字体. 解决方案 访问 Programming Fonts - Test Drive 站点,以查看并下载自己喜欢的字体. 我们使用的编程字 ...
最新文章
- Kotlin一大特色之空安全
- oracle断开不活跃链接,活跃进程连接导致数据库迟迟未关闭
- 事物Spring boot @Transactional
- new URI(zk_servers_1) 路径包含下划线无法获取host的问题
- Netbeans 适配C/C++、JAVA防坑秘笈
- Velocity 语法学习
- 面试题--------6、String常用的方法
- coturn NAT穿透服务器搭建
- 3个国内最大的黑客学习网站
- OpenSSL之自签名证书认证
- Mac命令行出现-bash: command not found的解决办法
- Map获取key，value的方法
- 软工作业 4：结对项目之词频统计——基本功能
- u盘 安装win11 提示找不到 install.wim 文件 解决方法
- 电源接头DC002的PCB封装
- echarts 实现柱状图左右横向对比显示
- python nonetype_理解Python中的NoneType对象
- AD7616的国产替代方案—ADCS16162（16位16通道同步采样ADC）
- 【电脑推荐】华硕A45EI361VM-SL
- 细思恐极，插上 U 盘就开始执行 Python 代码