css font字体瘦身
日常开发中,可能会用到第三方的字体,有时候只是用到了第三方字体里的数字或者字母或者特定的字符,但是却要引用整个字体。动则10M+的字体,这对于网络带宽速度不快的人,通常都需要等个几秒字体才会被加载出来,非常影响用户体验。
所以有咩有一种方法,可以把需要的字符提取出来,而不需要引用整个字体文件呢?
答案是有的,机智的大佬早就贴心的造好了工具供我们使用;
不废话了 直接上才艺:font-spider
首先全局安装一个font-spider工具
npm i -g font-spider
检查工具是否安装成功
font-spider -V
新建一个项目,新增一个html文件,css文件以及需要提取的字体文件
css文件
引用字体
@font-face {font-family: MiSans-Bold;src: url('../font/MiSans-Bold.ttf');
}
#txt {font-family: MiSans-Bold;
}
index.html文件
div#id里的内容即为你需要提取的字符,比如现在我需要提取里面的所有数字;
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/index.css"></head><body><div id="txt">0123456789</div></body>
</html>
打开项目所在的文件夹,呼出CMD 输入命令
font-spider ./index.html
等待执行完成即可
字体即被替换成提取字符后的文件,原始字体文件在.font-spider文件夹内;
原始字体文件7-8M, 提取后秒变2.58K
更多api方法请看上面文档链接;
E.G.M
css font字体瘦身相关推荐
- TureType/OpenType 字体瘦身、字体转换和字符替换
TureType/OpenType 字体瘦身.字体转换和字符替换 本文讲解下面一些关于 TTF/OTF 字体的基本知识和操作: 什么是TTF和OTF字体 删除/插入/替换字体中的字符 TTF/OTF ...
- 精简TTF字体、汉字字体瘦身 FontPruner,并转化为Base64编码
网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 一.使用FontPruner为字体瘦身 准备工具: python : ...
- 如何让自定义控件的字体瘦身(优化圆形圆点进度条)
一.开源 源码及demo下载 二.产品经理来了 本以为写好的圆形圆点进度条没问题了,因为写前篇博客时优化了一些细节.那位提需求的童鞋下班后呼叫我,说UI有点问题:我的百分比字体偏壮,没原版的苗条(告诉 ...
- CSS font 字体设置
取消标签加粗效果 font-weight:normal; 居中 text-align:center; 按照盒子模型,居中 text-align:center; display:block; 取消斜体 ...
- 利用fontmin给cocos2d-x游戏字体瘦身
清宫Q传有很多文本需要显示,同时为了效果也使用了很多种不同的字体,导致字体文件占据程序包很大比例的空间,搜索了一下,找到了一款工具fontmin可以有效减少字体大小. fontmin简介 fontmi ...
- CSS文字文本样式(font字体、css外观属性)
1. font字体 1.1. font-size:大小 作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...
- css的font修改颜色,css的font字体颜色如何设置
css的font字体颜色设置方法:1.直接在标签上使用"color:颜色"设置字体颜色:2.通过给font标签添加class属性,在css标签中通过该class设置字体颜色. 本教 ...
- 【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
文章目录 一. CSS 2.0手册使用 1. 按照文档层次查找 2. 搜索关键字查找文档 二. font-weight 字体粗细设置 1. 语法简介 2. 代码示例 三. font-style 字体斜 ...
- ttf字体包瘦身,ttf字体包提取指定字体,缩小ttf文件体积。
ttf字体包瘦身 注:此方法只试用于只需要少数字体的情况. 需求 做APP时出现了一个需求,应用登录页面和主页面的系统名称需要根据用户所属行政区划进行动态调节. 为了突出系统名和样式的美观,系统名在显 ...
最新文章
- 为什么 JSP 还没有被淘汰?
- 关于在VS 2013 Reshaper 中不能使用Alt+Enter 的解决
- python实现三叉树_使用python代码实现三叉搜索树高效率”自动输入提示”功能
- ClickHouse 分布式原理:Distributed引擎
- git pull提示当前branch没有跟踪信息
- 计算机密码忘了 开不了机怎么办,电脑设了开机密码现在忘了开不了机怎么处理?...
- java day14 【List、Set、数据结构、Collections】
- 关于python的文章_关于python的一篇介绍文章
- 【GNN框架系列】DGL第一讲:使用Deep Graph Library实现GNN进行节点分类
- Onvif协议:IPC客户端开发之图像抓拍
- Scratch3.0——作品截图
- toshiba 共享文件夹_东芝打印机如何共享
- 云杰恒指:8.16恒指期货指导交易周小结
- SwiftUI vs 故事板
- 大脑衰老可逆转,只需注入年轻脑脊液,“返老还童”登Nature
- 内存池 - 原理分析(一)
- 腾讯 Code Review 规范出炉!你还敢乱写代码??
- sangerbox使用教程_TCGA RNA测序ID转换一文就够
- 基于Opencv和STM32物理鼠标的目标跟踪器
- 常见webshell工具