前言:

很多时候项目会遇到需要引入外部字体,不管是vue,小程序,react等等,但是pc端项目还好,把源文件放我们本地是可以的,小程序就不行了,因为体量比较小,对大小有限制。

font-spider 字蛛 官网地址:最好有翻墙软件,不然太慢了,大概率不成功

font-spider.org -http://ww1.font-spider.org/

具体使用:

1、全局安装插件

npm install font-spider -g

2、检查有没有安装成功

font-spider -V

3、打开你的目录,找到你的源文件在的文件夹,比如我的

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.html

6、可以看到下面的界面,源文件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的使用相关推荐

  1. 中文字体压缩器——字蛛

    网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器 字蛛通过分析本地 C ...

  2. HTML字体以及图标字体iconfont、Font Awesome的使用

    字体 • 通过font-family可以指定标签中文字使用的字体. • 例如: p{font-family:Arial} ​ 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户 ...

  3. 导入外部字体且带字体压缩,以及判断h5,app,微信小游戏环境和字体的具体实现方式(egret为例)

    1.压缩字体方式 因为一般项目中不需要用到所有字体,所以需要将需要的字体在字体包提取出来重新打字体包 我选择的压缩字体方式是 :使用fontmin进行字体压缩 fontmin官网为: https:// ...

  4. 拖拽批量上传图片如何保证 顺序_图片压缩神器和图片分割工具,美工设计和运营终于得救了...

    想要快速互联网干货技巧? 请(置顶)星标我们 好不容易写好文案,设计好长图海报,上传到微信公众号,竟然提示上传图片体积不得超过5M,怎么办?怎么办? 不得已,只好又返回Ps里降低图片品质,换成有损格式 ...

  5. 中文字体压缩器并且转换(推荐阅读)

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  6. 字蛛(FontSpider,中文字体压缩器)网页自由引入中文字体

    之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...

  7. android系统自带字体设置,安卓手机系统字体设置-系统字体设置(Big Font) 安卓版v2.37-PC6安卓网...

    Big Font 改变系统字体大小:这个软件可以直接修改安卓系统字体的大小,相比原生系统的大中小肯那个还不能完全符合所有人.这个软件还不错. 官方介绍 透过改变系统字体大小Big Font应用,你可以 ...

  8. 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.) ...

  9. java font 字体库,「Font」- 编程字体 @20210209

    问题描述 该笔记将记录:与编程字体有关的内容,以及我们使用过的字体. 解决方案 访问 Programming Fonts - Test Drive 站点,以查看并下载自己喜欢的字体. 我们使用的编程字 ...

最新文章

  1. Kotlin一大特色之空安全
  2. oracle断开不活跃链接,活跃进程连接导致数据库迟迟未关闭
  3. 事物Spring boot @Transactional
  4. new URI(zk_servers_1) 路径包含下划线无法获取host的问题
  5. Netbeans 适配C/C++、JAVA防坑秘笈
  6. Velocity 语法学习
  7. 面试题--------6、String常用的方法
  8. coturn NAT穿透服务器搭建
  9. 3个国内最大的黑客学习网站
  10. OpenSSL之自签名证书认证
  11. Mac命令行出现-bash: command not found的解决办法
  12. Map获取key,value的方法
  13. 软工作业 4:结对项目之词频统计——基本功能
  14. u盘 安装win11 提示找不到 install.wim 文件 解决方法
  15. 电源接头DC002的PCB封装
  16. echarts 实现柱状图左右横向对比显示
  17. python nonetype_理解Python中的NoneType对象
  18. AD7616的国产替代方案—ADCS16162(16位16通道同步采样ADC)
  19. 【电脑推荐】华硕A45EI361VM-SL
  20. 细思恐极,插上 U 盘就开始执行 Python 代码

热门文章

  1. 四/八电极测脂技术做蓝牙八电极脂肪秤方案
  2. shell一键安装lnmp
  3. NABCD 分析 - TEAM LESS ERROR
  4. 具有检查点的恢复技术
  5. Paper reading (九十一):Bifidobacterium breve Bif195 Protects Against Small-Intestinal Damage
  6. 【MMDetection3D】环境搭建,使用PointPillers训练测试可视化KITTI数据集
  7. Remix-IDE安装开发环境与使用文档(Windows环境)
  8. NUKED数值表生成
  9. rz cz命令未找到
  10. 无人机集群任务规划方法研究综述论文解读