前言:

很多时候项目会遇到需要引入外部字体,不管是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. GPD电脑安装linux,怕虚拟机影响性能?GPD pocket 2 安装 Ubuntu 体验
  2. python 图表美化_你的图表不美观怎么办,Python实现数据可视化帮你实现
  3. eval函数 php_PHP的一句话木马代码和函数eval的简介
  4. 大数据学习笔记14:MR案例——招聘数据分析
  5. JavaScript文档对象模型DOM节点操作之第一个子元素和最后一个子元素(3)
  6. 2021-08-22监听器实现在线客户端统计
  7. 【HASPDOG】卸载
  8. (1)了解cocostudio基础
  9. 《计算机网络》复习笔记
  10. 在线电子名片html,HTML5 个人信息卡片(电子名片)模板
  11. npp++常用的匹配正则表达式
  12. 基于控制的角度无人机集群——目标追踪
  13. 如何高效学习.pdf
  14. Mac运行Android模拟器报The emulator process for AVD XXX has terminated错误
  15. 5G NR标准 第1章 什么是5G
  16. 【Java基础】· 集合习题详解
  17. iOS-TZImagePickerController获取相册照片、视频 (Swift代码)
  18. Neo4J 与 Cypher 查询语言基础
  19. lol服务器维护2021,lol维护几点结束 2021英雄联盟维护最新公告
  20. 基于MVS的三维重建算法学习笔记(一)— MVS三维重建概述与OpenMVS开源框架配置

热门文章

  1. iOS 关于leak检测内存问题的使用
  2. Unity实现签到系统
  3. 微信小程序小型按钮内文字布局变形
  4. 虎牙直播分类图片爬虫
  5. 如何避免渠道商的“养卡”和“劝弃卡”行为的发生
  6. java 微信获取用户地理位置_Java微信公众平台开发之获取地理位置
  7. 有趣的编程(一)——海盗分金币问题如何编程求解
  8. java生成二维码海报,面经解析
  9. python中Matplotlib、seaborn中英文乱码终极解决方案
  10. 用view-source:查看网页源代码