字蛛的用法以及遇到的问题
字蛛是一个中文字体压缩器,可以压缩字体文件,从而解决加载缓慢的问题。字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
字蛛官网网址为:http://font-spider.org/
接下来说一下具体的使用方法:
一、首先安装font-spider
npm install font-spider -g
二、检查字蛛是否安装完成,如果运行后出现版本说明安装成功
font-spider --version 或者 font-spider -V
三、使用字蛛
注意注意注意:
1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont
接下来具体说一下:
1、首先我们在桌面新一个font文件夹,在font文件夹下面新建一个html页面,比如font.html,然后把我们需要压缩的字体库xxxx.ttf文件放到与font.html同级目录
2、在font.html页面编译引入我们的字体库,具体写法如下:
<!DOCTYPE html>
<html lang="en">
<style>@font-face {font-family: HYRunYuan55W;src: url("./HYRunYuan-55W.ttf") format('truetype');font-weight: normal;font-style: normal;}
</style>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div>1 2 3 4 5 6 7 8 9您一共使用分享资源分享是幸福的而最大的幸福分享给学生那您一定是世界上最幸福的人就是把知识赶快开启您的分享之旅吧分享在信息化的道路上您又前进了一步我们一直在知识的奥秘我们共相伴了最美的风景不是天涯海角而是近在咫尺有您一路相伴真好
</div>
</body>
</html>
<style>div{font-family: HYRunYuan55W;}
</style>
上面div里面的内容就是我们需要从字体库中要筛选的所有字体,然后重新打包一份ttf文件,这份打包后的ttf文件就是只包含我们定义好的这些字体的文件了
3、然后打开cmd,在我们的font文件夹里面执行打包命令,注意:字体库一定要是ttf文件
font-spider font.html
第一种情况:运行后发现没报错,出现下面图片:说明打包成功了
运行成功后你会发现,font文件夹会把你之前的很大的ttf文件备份在新生成的.font-spider文件夹下,在font文件夹下打包压缩后的字体文件,发现字体库文件大小已经很小了。就没问题了,然后使用我们打包后的字体库就可以了
第二种情况:运行时候报错 Cannot read property ‘dirname’ of undefined
如果在文件里,使用了两次@font-face,分别对两种外部字体进行调用,而第一个调用不存在ttf文件,虽然没有对它进行处理,但是font-spider会对他进行识别,发现没有ttf文件,就自动报错。
所以一定注意使用的是ttf字体库
如果是vue项目我们就可以这么引入了
新建一个公共的aa.css文件
然后定义好我们的@font-face
@font-face {font-family: HYRunYuan35W;src: url("../fonts/HYRunYuan-35W.ttf") format("opentype");font-weight: normal;font-style: normal;
}
@font-face {font-family: HYRunYuan55W;src: url("../fonts/HYRunYuan-55W.ttf") format("opentype");font-weight: normal;font-style: normal;
}
在main.js引入import ../xxxxx/aa.css
然后在我们需要的地方就可以使用字体库了
通过 font-family: HYRunYuan35w;就可以正常使用了
字蛛的用法以及遇到的问题相关推荐
- 记一个小工具——font-spider(字蛛-css压缩中文字体字体)
font-spider 链接 用处 安装和用法 链接 先上一个官方链接吧 字蛛 再来一个Git地址字蛛Git地址 用处 这是一个压缩中文字体的小工具,用于前端开发过程中页面需要特定的文字,这些文字要是 ...
- 字蛛(FontSpider,中文字体压缩器)网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
- vue使用ttf字体包压缩 字蛛 font-spider
1.可以先建一个文件夹 里面包括 2.1>.css文件夹->index.css 2>.font(里面放的是ttf字体包) 3>.index.html 引入 4> ...
- 中文字体压缩器——字蛛
网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器 字蛛通过分析本地 C ...
- 字蛛压缩ttf字体(前端常用)
!!!压缩的只有调用字体的文字 字蛛压缩后有些文字不起作用 字蛛在压缩过程中只将调用字体的文字进行压缩,其他文字将不被压缩 1.准备 在页面中引用字体 <html><head> ...
- 字蛛fontSpider的使用
字蛛官方文档 http://font-spider.org/index.html 首先安装全局包 npm install font-spider -g 然后下载字体 ,本次需要的是 "造 ...
- 字蛛(font-spider)压缩字体
字蛛(font-spider)压缩字体 因项目需求使用自定义字体,发现页面加载很慢,字体在8m左右,所以使用font-spider压缩字体大小,提升页面加载速度. 1. 安装node ,npm 请参照 ...
- html 中文字体文件太大,【字蛛】如何压缩体积大的中文字体包
FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压 ...
- 字体文件压缩——字蛛(FontSpider)
简介 字蛛(FontSpider) 是一个中文字体压缩器: 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器 ...
最新文章
- AtCoder Beginner Contest 198 (A ~ F)题解
- 如何为项目配置网关并且测试、实战
- win7-64系统安装oracle 11G客户端
- 使用 Optional 摆脱 NullPointException 的折磨
- 华北电力大学计算机导论试题,华北电力大学 北京 继电保护历年复试试题.doc
- Android 系统构架(转)
- js获取input上传文件名和后缀
- wpf 控件大小随窗体大小改变而改变
- mysql sql宽字节注入_sql注入之宽字节注入
- python 使用文本注解绘制树节点_实用篇 | 34 个最火的 Python 开源框架
- 圆你国产数据库DBA之梦,达梦DCA培训考试券免费拿
- python中组合框_如何从SQL填充组合框数据?使用Python
- VS调试 启动vs报错--未启动IIS
- 书摘:刘润《5分钟商学院》之“结果偏见”
- Python数据库sqlite3详解
- fms安装教程 linux_如何借助Pandora FMS监控CentOS和Ubuntu服务器?
- GAN-cls:具有匹配感知的判别器
- 在几何画板上画椭圆可以根据椭圆第二定义
- qt实现视频播放器,基本功能都有,可以当毕设用
- 打印机驱动的PCL与PS的区别
热门文章
- 20P83 pr预设模板5000种视频转场过渡视觉特效豪华预设包 v2
- 在字节跳动干软件测试5年,2月无情被辞,想给划水的兄弟提个醒
- mysql wating for_MySQL:关于Wating for Slave workers to free pending events等待
- 误传了数千年的几个名句
- 一分钟带你快速认识S参数
- 【我的Android进阶之旅】解决使用DiskLruCache报错: keys must match regex [a-z0-9_-]{1,64}
- Windows 修改hosts过滤小游戏
- 2021.2.22学习总结
- java -1%3_Java_SE 流程控制
- Devoxx法国2012天3