font-spider利器对webfont网页字体压缩使用
官网
安装
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网页字体压缩使用的更多相关文章
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- 网页字体助手 WebFont Helper
网页字体助手 是 Windows 平台离线的网页字体生成辅助工具.核心功能,采用 python 编写. WebFont Helper 功能特色 生成字体子集(即提取用到的字符生成字体,或者大家所说的字 ...
- Font Combiner – 自定义网页字体和图标生成工具
Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...
- 网页字体在Frontpage2000制作网页中的讲解
运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...
- CSS自定义字体的实现,前端实现字体压缩
CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...
- CSS 网页字体最佳实践
一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...
- Type.js – 帮助你更好的控制网页字体排版
Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...
- 服务器网页GZIP压缩怎么配置
服务器网页GZIP压缩怎么配置 服务器网页GZIP压缩怎么配置,GZIP压缩对网页压缩来说最好不过了,下面是IIS下Gzip配置详细操作步骤: 简单来说,IIS6集成了Gzip,只不过 ...
- JavaScript在智能手机上的应用-通过滑动修改网页字体大小
---------------------------------- <script type="text/javascript"> //变量x, ...
随机推荐
- python入门(14)定义函数和接收返回值
定义函数: 定义一个求绝对值的my_abs函数为例: def my_abs(x): if x >= 0: return x else: return -x 如果没有return语句,函数执行完毕 ...
- IIFE的形式、原理和常见写法
immediately invoked function expression 立即调用的函数表达式 出现的形式: 最近做牛客网的JS在线编程,遇到几道考闭包的题目,发现闭包的尾巴那儿经常会出现一对小 ...
- Python之面向对象四
面向对象进阶 一.关于面向对象的两个内置函数 isinstance 判断类与对象的关系 isinstance(obj,cls)检查obj是否是类 cls 的对象,返回值是bool值 issu ...
- Python入门之迭代器/生成器/yield的表达方式/面向过程编程
本章内容 迭代器 面向过程编程 一.什么是迭代 二.什么是迭代器 三.迭代器演示和举例 四.生成器yield基础 五.生成器yield的表达式形式 六.面向过程编程 ================= ...
- 爬取IP
import urllib.request import re def url_open(url): req = urllib.request.Request(url,headers={'User-A ...
- [Nginx]-外部多端口映射Https443端口配置
https服务器配置完成后,域名访问默认匹配至443端口,如果想同时通过https域名网址来请求多个对外服务,就需要在Nginx配置里来对请求进行规则判断,并匹配至相应的内部端口,这也是Nginx反向 ...
- SQL基础-----DDL
1 (My)SQL入门 这里用了(My)SQL这样的标题,目的是介绍标准SQL的同时,也将MySQL在标准SQL上的扩展一同介绍给读者. 2:SQL分类 SQL语句主要可以划分为以下3个类别 .DDL ...
- JS继承的一些见解
JS继承的一些见解 js在es6之前的继承是五花八门的.而且要在项目中灵活运用面向对象写法也是有点别扭,更多的时候还是觉得面向过程的写法更为简单,效率也高.久而久之对js的继承每隔一段时间就会理解出现 ...
- Pycharm数据库连接错误
简单地总结就一句话: Python2的mysql库为:mysqldb,而Python3的为:pymysql. 当我们使用Pycharm开发项目时,首先需要下载安装相对应的数据库,以及在项目根目录下的s ...
- 空间搜索(圆范围)中Geohash编码方案和网格编码方案对比探讨
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 多个项目中实现范围(圆)搜索的方案为:依赖库表中的X和Y字段构 ...