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, ...
随机推荐
- 什么是MQTT协议?
MQTT协议介绍 MQTT协议是什么? MQTT(Message Queuing Telemetry Transport Protocol)的全称是消息队列遥感传输协议的缩写,是一种基于轻量级代理的发 ...
- Spring Framework 的 Assert断言
知识共享才能传播,博采众家之长,才能推陈出新!-- 参考 https://www.cnblogs.com/hwaggLee/p/4778101.html 一.什么是 Assert(断言)? Web 应 ...
- LDAP的用户需求
使用LDAP(ApacheDS)构建统一认证服务(SSO单点登录) 构建团队协作的体系,需要涉及很多个系统,如SVN.Jenkins.Trac.Nexus等,而一般而言每个系统均有其用户体系,当我 ...
- Linux上 ps 命令的用法
ps a 显示现行终端机下的所有程序,包括其他用户的程序.2)ps -A 显示所有程序. 3)ps c 列出程序时,显示每个程序真正的指令名称,而不包含路径,参数或常驻服务的标示. 4)ps -e 此 ...
- s遇到错误不要慌,教你方法走四方
我觉得不管是新手还是老手,他们都会出错,有些错误控制台会报错,而有些错误控制台不会报错 面对不会报错的时候,就有一些人烦恼,不知道怎么办了,久而久之,就失去了对学习的乐趣. 所以我在这里说一下对错误处 ...
- [CodeForces10D]LCIS(最长公共上升子序列) - DP
Description 给定两个数列,求最长公共上升子序列,并输出其中一种方案. Input&Output Input 第一行一个整数n(0<n<=500),数列a的长度. 第二行 ...
- Http post请求数据分析 --作者, 你的这个需求我可以做, 我在平台上无法给你发消息和接收你的任务, 所以,如果你看到这个信息, 可以联系我.
Http post请求数据分析 作者, 你的这个需求我可以做, 我在平台上无法给你发消息和接收你的任务, 所以,如果你看到这个信息, 可以联系我. 软件需求就是不停post一个网址,然后根据返回的信息 ...
- Java:逐行读、写文件、文件目录过滤的用法
import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.I ...
- Android P新功能特性抢先看
2018年3月8日,Google推出了Android P Preview版本,并提供官方镜像下载. 为了让广大开发者能够及时了解Android P的新功能特性,提前为您的app进行良好适配,WeTes ...
- jacascript document对象
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! Document 类型表示文档,或文档的根节点,这个节点是隐藏的,没有具体的节点标签:而 html 是根标 ...