字蛛fontSpider的使用
字蛛官方文档 http://font-spider.org/index.html
首先安装全局包 npm install font-spider -g
然后下载字体 ,本次需要的是 "造字工房力黑(非商用)常规体.ttf" ,放到指定的文件夹里,然后在下面调用
/*声明 WebFont*/
@font-face {
font-family: 'zzgflh';
src: url('../font/zzgflh.eot');
src:
url('../font/zzgflh.eot?#font-spider') format('embedded-opentype'),
url('../font/zzgflh.woff') format('woff'),
url('../font/zzgflh.ttf') format('truetype'),
url('../font/zzgflh.svg') format('svg');
font-weight: normal;
font-style: normal;
}
在git 里面输入命令 font-spider index.html,会在font文件夹生成下面几个文件

补充1:
后来的项目中,页面中的数字需要用到特殊字体,而这些数据又是请求接口后才显示的,这种情况下就使用不到字蛛这种预先处理了。而整个字体文件都加载的话又不友好,那么这种情况下可以怎么处理呢?
我们可以独立创建一个文件夹,在里面按照上面的步骤重新使用字蛛,只不过index.html使用到该字体的内容要输出 “0123456789”,然后执行字蛛后生成的新文件就是我们要的字体文件啦,而且满足了兼容各浏览器的不同格式要求。
因为我们上网找的字体文件一般都是.otf 和.ttf,而使用字蛛只需要ttf文件,就可以生成我们要的数字特殊字体了。
未解决问题:
如果页面中输出的字体内容不确定(有中文,英文,数字,字符等),但是又找不到对应对的四个文件格式,这种情况怎么做兼容呢?
字蛛fontSpider的使用的更多相关文章
- 中文WebFont解决方案Font-Spider(字蛛)
我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...
- 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)
特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...
- fontSpider字蛛,好用的字体压缩工具教程
一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力 ...
- 精简TTF字体、FontPruner、汉字字体瘦身(非字蛛)
20190726更新 标黄部分 网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 准备工具: python : 我使用是 ...
- 用 字蛛 取出需要的字符应用字体 @font-face
一.安装font-spider npm install font-spider -g 二.目录结构 font-spider font FZZZHONGHJW.ttf font.html 三.font. ...
- 字蛛webfont 安装及使用方法
先安装nodejs和git,比如放在D:/nodejs/ 文件夹 cmd 进入该文件夹,安装npm install express 安装 npm install font-spider -g 安装 ...
- 开源字体包缩减font-spider
最近公司产品用微软雅黑,被告~ 领导要求产品后台系统必须更换字体,美工给了个宋体,个人觉得太丑,就网上搜了些处理方法使用 CSS属性 @font-face 自定义字体, 最后决定用 思源黑体 (思源 ...
- 优秀网站看前端 —— 小米Note介绍页面
刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的 ...
- CSS Font知识整理总结
1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...
随机推荐
- IC向管理者角色转换
1. 虽然你认为自己已经想明白怎么干,但还是从怎么干回归到要解决的问题,抛给正确的人(应该对这些问题负责的人),引导他们想出问题的答案. 给别人机会和空间,帮助他们成长: 人们对自己“想”出的方案更有 ...
- RHEL6解决无法使用YUM源问题(转)
RHEL的YUM源需要注册用户才能更新使用,由于CentOS和RHEL基本没有区别,并且CentOS已经被REHL收购.所以将RHEL的YUM源替换为CentOS即可.问题如下:[root@bogon ...
- 今天研究了一下手机通信录管理系统(C语言)
题目:手机通信录管理系统 一.题目要求 二.需求分析 三.设计步骤/编写代码 四.上机/运行结果 五.总结 一.题目要求 模拟手机通信录管理系统,实现对手机中的通信录进行管理操作.功能要求: (1)查 ...
- vi 基本使用命令
说明:以下的例子中 xxx 表示在命令模式下输入 xxx 并回车以下的例子中 :xxx 表示在扩展模式下输入 xxx 并回车小括号中的命令表示相关命令在编辑模式或可视模式下输入的命令会另外注明 1 查 ...
- 61 origin授控于MATLAB
官方教程:http://www.originlab.com/forum/topic.asp?TOPIC_ID=22339 学习自白东升老师originPRO8.0教程. 我用的是origin pro2 ...
- AQS详解(AbstractQueuedSynchronizer)
Intrinsic VS explicity 1. 不一定保证公平 1. 提供公平和非公平的选择 2. 无 2. 提供超时的 ...
- spring boot搭建Hello Word
一.安装与配置jdk 二.安装与配置maven 安装好maven,必须配置环境变量 通过cmd命令查询maven是否安装成功,以下是安装成功的界面 修改setting.xml的配置,制定本地仓库的路径 ...
- [IOS] 详解图片局部拉伸 + 实现图片局部收缩
(图为微信首页右上角『+』效果) 当初还在开发WP7的时候,从IOS同事那边了解到类似微信以上功能的实现. Item条数不同,总高度也不同,这就需要将背景图片进行局部拉伸到响应的高度,并且保持上方的三 ...
- C++虚函数表(vtbl)
C++的虚函数的作用就是为了实现多态的机制,利用内存的指针偏移来实现将基类型的指针指向的内存空间用子类对象来初始化.这样经过内部虚表的运作,实现可以通过基类指针来调用子类所定义的方法. 这种技术,其实 ...
- Dalsa线扫相机配置-一台工控机同时连接多个GigE相机
如图,我强悍的工控机,有六个网口. 实际用的时候连了多台相机,为了偷懒我就把六个网口的地址分别设为192.168.0.1~192.168.0.6,以为相机的IP只要设在192.168.0这个网段然后随 ...