开发页面时经常需要使用特殊字体，一个.ttf文件动则几M,字体文件需要优化

http://font-spider.org/

安装好node环境后

1.全局安装font-spider

npm install font-spider -g

2.如果字体不全是写在html中的,那么写个文件用于生成字体

*.ttf文件必须有，其他格式的程序将自动生成

1) getFont.html文件

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>document</title>

	<style>

		@font-face {

          font-family: 'hk';

          src: url('./font/hk.eot');

          src:

            url('./font/hk.eot?#font-spider') format('embedded-opentype'),

            url('./font/hk.woff') format('woff'),

            url('./font/hk.ttf') format('truetype'),

            url('./font/hk.svg') format('svg');

          font-weight: normal;

          font-style: normal;

        }

        .myFont{font-family: 'hk';}

	</style>

</head>

<body>

	<div class="myFont">

		这里写需要用到的字体...

	</div>

</body>

</html>

2) 将 hk.tff文件放在同级font目录中

3. cd到目录中 执行

font-spider getFont.html

如遇到报错：Error: Expecting a function in instanceof check, but got undefined

修改

node_modules\font-spider\src\spider\index.js 文件

中的getWebFonts函数

将以下判断去除

// if (cssRule instanceof CSSFontFaceRule) {

// }

tool 使用font-spider解决字体压缩问题的更多相关文章

  1. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  2. ASP.Net MVC_DotNetZip简单使用方法,解决文件压缩的问题[转]

    准备工作: 在vs工具栏中找到NuGet   下载DotNetZip   现在就可以使用DotNetZip强大的类库了,在这里我给出一些简单的使用. ? 1 2 3 4 5 6 7 8 9 10 11 ...

  3. Font Awesome图标字体应用及相关

    作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...

  4. CSS自定义字体的实现，前端实现字体压缩

    CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...

  5. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

  6. font-spider-plus，字体压缩插件使用笔记

    font-spider-plus使用笔记, fsp是一个腾讯的大佬改版后的font-soider 主要思路是 采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩, 1,npm i font ...

  7. k 近邻算法解决字体反爬手段｜效果非常好

    字体反爬,是一种利用 CSS 特性和浏览器渲染规则实现的反爬虫手段.其高明之处在于,就算借助(Selenium 套件.Puppeteer 和 Splash)等渲染工具也无法拿到真实的文字内容. 这种反 ...

  8. 解决winrar压缩软件弹出广告

    最近winrar每次打开压缩包就会弹出一个广告,那是因为winrar是收费软件,注册了就没有广告了.下面我教大家怎么注册来屏蔽广告. 解决方法 1.新建一个txt文件并命名为"rarreg. ...

  9. [.NET源码学习]实例化Font，遭遇字体不存在的情况。

    实例化Font类时,当传入参数为不存在或未安装的字体时,Windows系统会用Microsoft Sans Serif字体替代该字体. Msdn: "For more information ...

随机推荐

  1. Mysql -- 外键的变种 三种关系

    一.介绍 因为有foreign  key的约束,  使得两张表形成了三种关系 多对一      多对多   一对一 二.如果找出两张表之间的关系 #.先站在左表的角度去找 是否左表的多条记录可以对应右 ...

  2. 【原创】大叔经验分享（21）yarn中查看每个应用实时占用的内存和cpu资源

    在yarn中的application详情页面 http://resourcemanager/cluster/app/$applicationId 或者通过application命令 yarn appl ...

  3. 使用Python正则表达式自己实现解析URL各参数

    不使用库,自己可以利用正则表达式实现解析域名各部分参数:协议.域名.端口.路径.载荷等. 使用的正则表达式如下: r'''(?x)\A ([a-z][a-z0-9+\-.]*):// # Scheme ...

  4. ssh反向代理

    文章链接:https://www.cnblogs.com/kwongtai/p/6903420.html 前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后 ...

  5. Oracle内存详解之 Library cache 库缓冲

    Oracle内存详解之 Library cache 库缓冲 2017年11月09日 11:38:39 阅读数:410更多 个人分类: 体系结构 Library cache是Shared pool的一部 ...

  6. C/C++的20个位运算技巧

    一提起位运算,人们往往想到它的高效性,无论是嵌入式编程还是优化系统的核心代码,适当的运用位运算总是一种迷人的手段,或者当您求职的时候,在代码中写入适当的位运算也会让您的程序增加一丝亮点,最初当我读&l ...

  7. 带问号的括号匹配问题918C 1153C

    cf里好像经常出 这些题,一般贪心是搞不了的.. 918C 问有多少子段[l,r]满足合法括号 先从左往右扫,如果问号+‘(' 数量 >= ')' 说明这段区间的 ) 是满足条件的 然后再从右往 ...

  8. Sharding-JDBC

    1.官网文档:https://shardingsphere.apache.org/document/legacy/3.x/document/cn/manual/sharding-jdbc/usage/ ...

  9. xstream实现对象的序列化和反序列化（Java）

    概述 最新整理Java方面XML序列化和反序列化的常用工具类,找到了dom4j和xstream.dom4j相对小巧,很好的解读xml:但是对于对象的xml序列化和反序列化,我还是比较喜欢xsteam( ...

  10. AGC-018 C

    题意: 有$X + Y + Z$个人,第$i$个人有$Ai$个金币,$Bi$个银币,$Ci$个铜币. 选出$X$个人获得其金币,选出$Y$ 个人获得其银币,选出$Z$个人获得 其铜币,在不重复选某个人 ...