官网

http://font-spider.org/

安装

npm install font-spider -g

使用

hyheilizhitij(汉仪黑荔枝体简)

1.通过font-face引入我们下载好的文件

@font-face{
font-family: 'myfont';
src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

2.使用自定义字体

.test{
font-family: 'myfont';
}

3.执行font-spider命令压缩字体

运行font-spider命令 ,页面依赖的字体将会自动压缩好,原 .ttf 字体会备份

font-spider ./index.html

压缩之前是1753.24 KB大小,压缩之后大小4.796 KB

Original size: 1753.24 KB

File fonts/HYHeiLiZhiTiJ.ttf created: 4.796 KB

4.使用效果

完整代码

<div class="test">
账号未登录,请先登录的分身乏术地方发送
</div>
<style>
@font-face{
font-family: 'myfont';
src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.test{
font-family: 'myfont';
}
</style>

作者:fozero

声明:原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/8953288.html

标签:css

font-spider利器对webfont网页字体压缩使用的更多相关文章

  1. 使用 font-spider 对 webfont 网页字体进行压缩

    原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...

  2. 网页字体助手 WebFont Helper

    网页字体助手 是 Windows 平台离线的网页字体生成辅助工具.核心功能,采用 python 编写. WebFont Helper 功能特色 生成字体子集(即提取用到的字符生成字体,或者大家所说的字 ...

  3. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  4. 网页字体在Frontpage2000制作网页中的讲解

    运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...

  5. CSS自定义字体的实现,前端实现字体压缩

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

  6. CSS 网页字体最佳实践

    一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...

  7. Type.js – 帮助你更好的控制网页字体排版

    Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...

  8. 服务器网页GZIP压缩怎么配置

    服务器网页GZIP压缩怎么配置     服务器网页GZIP压缩怎么配置,GZIP压缩对网页压缩来说最好不过了,下面是IIS下Gzip配置详细操作步骤:     简单来说,IIS6集成了Gzip,只不过 ...

  9. JavaScript在智能手机上的应用-通过滑动修改网页字体大小

    ---------------------------------- <script type="text/javascript">            //变量x, ...

随机推荐

  1. Dojo API中文 Dojo内容模块概览,初学者

    官网:http://dojotoolkit.org/reference-guide/1.10/dojo/index.html#dojo-dojo的翻译 dojo 内容: dojo dojo/dojo ...

  2. Docker学习笔记 - Docker客户端和服务端

    学习内容: Docker客户端和服务端的通讯方式:client和自定义程序 Docker客户端和服务端的连接方式:socket 演示Docker客户端和服务端之间用remote-api通讯:nc   ...

  3. zuul入门(2)zuul的过滤器分类和加载

    一.Groovy编写的Filter 1.可以放到指定目录加载 创建一个pre类型的filter,在run方法中获取HttpServletRequest 然后答应header信息 在代码中加入groov ...

  4. Tomcat(1-1)重置Tomcat8.5管理员的用户名和密码

    1.访问 http://localhost:8080/,点击 [manager app],提示输入用户名和密码,admin/admin后报错.  2.解决办法:重置Tomcat8.5管理员的用户名和密 ...

  5. Tomcat NIO

    说起Tomcat的NIO,不得不提的就是Connector这个Tomcat组件.Connector是Tomcat的连接器,其主要任务是负责处理收到的请求,并创建一个Request和Response的对 ...

  6. SQL基础----DCL

    在之前的文章已经讲到SQL基础DDL(数据库定义语句 http://www.cnblogs.com/cxq0017/p/6433938.html)和 DML(数据库操作语句 http://www.cn ...

  7. [NOI 2011]阿狸的打字机

    Description 题库链接 给你 \(n\) 个单词, \(m\) 组询问,每组询问形同 \((x,y)\) ,询问 \(x\) 串在 \(y\) 串中出现多少次. \(1\leq n,m\le ...

  8. 2-XOR-SAT

    [题目描述]SAT(Satisfiability,可满足性)问题是著名的 NP 完全问题,它的内容是:判断由有限个布尔变量及其“非”用“或”操作连接起来的表达式组是否可以都为 TRUE.2-SAT 问 ...

  9. [TJOI2017]可乐

    题目描述 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且放在了加里敦星球的1号城市上.这个可乐机器人有三种行为: 停在原地,去下一个相邻的城市,自爆.它每一秒都会随机 ...

  10. 贼有意思[最长上升公共子序列](SAC大佬测试题)

    题目描述Awson 最近越来越蠢了,一天就只知道 zyys.他定义了一个 zyys 数列:这个数列满足:1.是另外两个数列 A,B 的公共子序列;2.数列单调递增.现在他有一个问题,我们假设知道两个长 ...