字蛛官方文档 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的使用的更多相关文章

  1. 中文WebFont解决方案Font-Spider(字蛛)

    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...

  2. 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)

    特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...

  3. fontSpider字蛛,好用的字体压缩工具教程

    一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力 ...

  4. 精简TTF字体、FontPruner、汉字字体瘦身(非字蛛)

    20190726更新 标黄部分 网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 准备工具: python : 我使用是 ...

  5. 用 字蛛 取出需要的字符应用字体 @font-face

    一.安装font-spider npm install font-spider -g 二.目录结构 font-spider font FZZZHONGHJW.ttf font.html 三.font. ...

  6. 字蛛webfont 安装及使用方法

    先安装nodejs和git,比如放在D:/nodejs/  文件夹 cmd 进入该文件夹,安装npm install express 安装 npm install font-spider -g 安装  ...

  7. 开源字体包缩减font-spider

    最近公司产品用微软雅黑,被告~  领导要求产品后台系统必须更换字体,美工给了个宋体,个人觉得太丑,就网上搜了些处理方法使用 CSS属性 @font-face 自定义字体, 最后决定用 思源黑体 (思源 ...

  8. 优秀网站看前端 —— 小米Note介绍页面

    刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的 ...

  9. CSS Font知识整理总结

    1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...

随机推荐

  1. DataStage 九、数据交换到MySQL以及乱码问题

    DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 DataStage 三.配置ODBC Da ...

  2. Spring Boot之初始化项目

    最简单的从Spring官网下载 :地址 https://start.spring.io/ 下拉选择需要的Spring Boot版本 修改Group和Artifact  直接点击Generate Pro ...

  3. C语言基础课第四次作业

    1.实验代码      7-2 打印九九口诀表 (15 分) #include<stdio.h> #include<math.h> int main(void){ int a, ...

  4. delphi XE7 数组操作中缺少的find(POS)功能

    delphi xe7 中对数组操作做了很多扩充,比如加入了类似字符串处理的功能. 例如,数组相加 var A: array of integer; B: TBytes = [1,2,3,4]; //I ...

  5. 2018.10.20 NOIP模拟 巧克力(trie树+dfs序+树状数组)

    传送门 好题啊. 考虑前面的32分,直接维护后缀trietrietrie树就行了. 如果#号不在字符串首? 只需要维护第一个#前面的字符串和最后一个#后面的字符串. 分开用两棵trie树并且维护第一棵 ...

  6. 2018.09.26洛谷P1084 疫情控制(二分+倍增)

    传送门 好题啊. 题目要求的最大值最小,看到这里自然想到要二分答案. 关键在于怎么检验. 显然对于每个点向根走比向叶节点更优. 因此我们二分答案之后,用倍增将每个点都向上跳到跳不动为止. 这时我们ch ...

  7. 2018.09.08 bzoj1151: [CTSC2007]动物园zoo(状压dp)

    传送门 状压dp好题啊. 可以发现这道题的状压只用压缩5位. f[i][j]表示当前在第i个位置状态为j的最优值. 显然可以由f[i-1]更新过来. 因此只用预处理在第i个位置状态为j时有多少个小朋友 ...

  8. Django入门与实践-第13章:表单处理(完结)

    http://127.0.0.1:8000/boards/1/ http://127.0.0.1:8000/boards/2/ http://127.0.0.1:8000/boards/3/ http ...

  9. An existing resource has been found at location D:\Tomcat 7\apache-tomcat-7.0.55\webapps。。。

    这个错误是说你的资源丢失,就是说tomcat无法解析你的.class文件,需要自己重新配置一下. 解决方法: 右击项目名 ---> 点击properties --> 在搜索栏里 输入 WE ...

  10. UVa 1638 Pole Arrangement (递推或DP)

    题意:有高为1,2,3...n的杆子各一根排成一行,从左边能看到L根,从右边能看到R根,求杆子的排列有多少种可能. 析:设d(i, j, k)表示高度为1-i的杆子排成一行,从左边看到j根,从右边看到 ...