css字体.ttf文件压缩3.1M变8K(原生和Vue中使用)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、font-spider是什么?
- 字体下载推荐
- 一、使用步骤
- 1.安装库
- 使用
- 编写css和html
- 使用font-spider压缩字体
- 使用压缩后的目录
- font-spider压缩原理
- 在Vue中使用
- 把我们要使用得字体抽离出来后,我在vue的src/assets目录中新建css文件
- font.css
- 在对应的 .vue文件中引入
- 总结
- 因为 font-spider 只能抽取静态得内容 ,不能动态抽取,对应一些页面上面写死得文字我们可以拿来抽取,达到字体文件包得减少,对应服务端返回数据不能使用font-spider抽离(可以字母汉字符号抽离,因为汉字太多无法抽离,对应汉字需要显示特殊字体还是需要引用原始字体包来实现)
前言
今天客户反馈跟设计的字体不一样,于是就去下载了对应得字体,引用到项目中,看到这个字体文件在本地都加载了接近3S,想了下前面应为这个项目做了首屏加载优化,一下有多出来3S加载时间,显然客户接受不了,于是开始漫长得百度之路 发现了一个机遇Node的插件库
一、font-spider是什么?
通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。中文 WebFont 自动化压缩工具。官方网站 font-spider
字体下载推荐
字客网
一、使用步骤
1.安装库
代码如下(示例):
npm install font-spider -g
或者
yarn add font-spider -g
使用
先看看目录结构
编写css和html
注意 div中的内容就是我们要抽出为字体!!!
注意 div中的内容就是我们要抽出为字体!!!
注意 div中的内容就是我们要抽出为字体!!!
注意 div中的内容就是我们要抽出为字体!!!
<style>@font-face {font-family: '旁门正道'; /* 使用字体得名字 */src: url('./庞门正道标题体2.0增强版.ttf');src: url('./庞门正道标题体2.0增强版.eot?#font-spider') format('embedded-opentype'),url('./庞门正道标题体2.0增强版.woff') format('woff'),url('./庞门正道标题体2.0增强版.ttf') format('truetype'),url('./庞门正道标题体2.0增强版.svg') format('svg');font-weight: normal;font-style: normal;}</style><div style="font-family: '旁门正道';">一键叫车1234567890sS</div>
使用font-spider压缩字体
font-spider ./index.html
如果出错检测是否安装起font-spider
查看安装版本
font-spider -V
可以看出压缩后只有8K!
使用压缩后的目录
压缩后的目录多出四个文件以及一个文件夹 .font-spider存放得原始文件
font-spider压缩原理
font-spider可以抽离出你使用到的字体,如果使用没有抽离得字体就会显示默认得微软雅黑
但是对于单页面的动态数据有点不可行,因为你也不知道返回的数据到底有哪些字体 (在vue和React中怎么使用,下面我们会讲到)
测试使用没有别抽出得字
在Vue中使用
把我们要使用得字体抽离出来后,我在vue的src/assets目录中新建css文件
css文件内容为我们上面书写得内容一样
font.css
@font-face {font-family: '旁门正道';src: url('./庞门正道标题体2.0增强版.ttf');src: url('./庞门正道标题体2.0增强版.eot?#font-spider') format('embedded-opentype'),url('./庞门正道标题体2.0增强版.woff') format('woff'),url('./庞门正道标题体2.0增强版.ttf') format('truetype'),url('./庞门正道标题体2.0增强版.svg') format('svg');font-weight: normal;font-style: normal;
}
在对应的 .vue文件中引入
<style scoped >@import '../assets/css/font.css';
</style>
在对应得类名加上
.pp{
font-family: '旁门正道'
}
总结
**
因为 font-spider 只能抽取静态得内容 ,不能动态抽取,对应一些页面上面写死得文字我们可以拿来抽取,达到字体文件包得减少,对应服务端返回数据不能使用font-spider抽离(可以字母汉字符号抽离,因为汉字太多无法抽离,对应汉字需要显示特殊字体还是需要引用原始字体包来实现)
**
css字体.ttf文件压缩3.1M变8K(原生和Vue中使用)相关推荐
- vue-引入外部字体TTF文件到select选择
新建font.css文件,添加ttf文件 . font.css文件内容 @font-face { font-family: 'ESRI_40'; src: url('./ESRI_40.TTF');f ...
- webpack5-打包css等样式资源,css等样式文件提取,css等样式文件压缩
打包css资源 加载css资源需要安装style-loader,css-loader库 配置如下: module: {rules: [// 在rules中写详细的loader配置// 打包css资源{ ...
- WPF使用第三方的字体(TTF文件)
一.下载字体 找到需要的字体文件,可以是TTF或TTC格式,我这里使用的是TTC格式 测试字体: 链接:https://pan.baidu.com/s/1P1BCucH2gd_fldcZTgZaNA ...
- 读取字体.ttf文件,生成艺术字图片代码
做了个艺术字在线制作网站,整理一下技术代码 System.Drawing.Text.PrivateFontCollection FM = new PrivateFontCollection(); FM ...
- PDF文件压缩有什么方法?如何操作?
PDF文件压缩有什么方法呢?对于处理文件的大家都知道,在双方进行传输文件的时候会不会发现有时候特别慢,原因你知道为什么吗?第一可能就是你的网络信号不行.二是传输的PDF文件过大,.针对于第二点可以将P ...
- 【图文教程】文件压缩和打包
文件压缩和打包 1. 压缩打包介绍 2. gzip压缩工具 3. bzip2压缩工具 4. xz压缩工具 5. gzip.bzip2.xz命令总结 6. zip压缩工具 7. tar打包 8. tar ...
- ppt文件太大怎么变小,这6种方式很简单
ppt文件太大怎么变小? ppt文件通常用于公司会议.教育授课和商务演讲等场合,由于需要实现各种文档效果并插入大量图片,因此文件大小要远大于普通文档文件,占用的存储空间也不少.如果电脑中存储了大量PP ...
- python编写的软件界面-用Python写一个带图形界面的文件压缩软件
这又是一篇用Python写小软件系列,最近有点写上瘾了,文件压缩和解压我们在日常工作学习中会经常用到,比如winrar.快压.好压等压缩软件,猿人学用Python做个简易图形界面的压缩软件. 打开之后 ...
- 【Android 内存优化】图片文件压缩 ( Android 原生 API 提供的图片压缩功能能 | 图片质量压缩 | 图片尺寸压缩 )
文章目录 一. 图片压缩 二. 图片文件压缩类型 三. Android 原生 API 提供的质量压缩 四. Android 原生 API 提供的尺寸压缩 一. 图片压缩 图片压缩 : ① 文件压缩 : ...
- Linux常用命令(本篇包括,Linux目录结构介绍、Linux Shell介绍、9个常见命令介绍、文件的概念、文件的操作(20个)、目录的操作、文件和目录的权限、文件压缩及解压缩)
Linux常用命令(本篇包括,Linux目录结构介绍.Linux Shell介绍.9个常见命令介绍.文件的概念.文件的操作(20个).目录的操作.文件和目录的权限.文件压缩及解压缩) ...
最新文章
- 【elementUI】el-tree搜索时加载子节点对应父节点、父节点对应子节点树
- leetcode算法题--二叉搜索树迭代器
- FZU 2214 Knapsack problem(背包问题)
- 评估指标:混淆矩阵、PR、mAP、ROC、AUC
- SAP Engagement Center的ShellCarousel控件control
- Android开发 ---多线程操作:Handler对象,消息队列,异步任务下载
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
- mp3排序软件哪个好用_电脑录音软件哪个好用?
- 一篇了解什么是Spring AOP
- BZOJ 1619 [Usaco2008 Nov]Guarding the Farm 保卫牧场:dfs【灌水】
- webmin升级php,Centos linux下webmin安装及配置
- 动物之美计算机教案,清华大学版六年级上册信息技术教案第三课 动物之美——图像分类管理.pdf...
- python--查询PG数据库
- 怎样理解OOP?OOP又是什么?
- 冰桶大作战怎么玩_开源领导者接受冰桶挑战
- FND MESSAGE的用法
- C/C++超市收银系统
- redis核心数据结构以及他的应用场景
- 淘宝api接口数据和爬虫数据教程
- phonegap mysql_phoneGap-Android开发环境搭建