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