字体文件压缩——字蛛(FontSpider)

简介

字蛛(FontSpider) 是一个中文字体压缩器；

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

安装

请先确保有NodeJs，然后开始使用

npm install font-spider -g

构建插件：grunt-font-spider | gulp-font-spider

使用

在 CSS 中使用 WebFont

/*声明 WebFont*/
@font-face {font-family: "SourceHanSerifCN-Regular";src: url('../font/SourceHanSerifCN-Regular.eot');src:url('../font/SourceHanSerifCN-Regular.eot?#font-spider') format('embedded-opentype'),url('../font/SourceHanSerifCN-Regular.woff') format('woff'),url('../font/SourceHanSerifCN-Regular.ttf') format('truetype'),url('../font/SourceHanSerifCN-Regular.svg') format('svg');font-weight: normal;font-style: normal;
}

使用css选择器指定字体

.nav-menu .tel-number{font-family: 'SourceHanSerifCN-Regular';font-size: 28px;letter-spacing: 3px;color: #989696;margin-left: 16px;
}

1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont

如果只有后缀名为 .otf 的字体文件，也可以使用字体转换工具 FontCreator（百度破解版自行下载就好了）

运行 font-spider 命令

/*加 --debug 能查看日志*/
//单个html文件
font-spider --debug ./index.html

//多个html文件
font-spider --debug ./*.html

可能遇到的问题

有一次一个字体文件怎么压缩都没用，还是源文件的大小，并且也没有生成.eot、.woff、.ttf、.svg这些文件。

我试着换了个网站，重新下了一个该字体的文件，就好了。

字体文件压缩——字蛛(FontSpider)相关推荐

vue使用ttf字体包压缩字蛛 font-spider
1.可以先建一个文件夹里面包括 2.1>.css文件夹->index.css 2>.font(里面放的是ttf字体包) 3>.index.html 引入 4> ...
字体文件压缩 - font-spider (字蛛)
优化加载速度, 压缩字体文件安装: npm install font-spider -g 查看版本: font-spider -v 1. 新建一个fonts文件 2. fonts下新建index. ...
font-spider-plus字体文件压缩
中文字体文件一般都非常庞大,本地开发使用时可能感觉不到,但是部署到服务器之后,会发现页面加载速度被明显拖慢,一个字体文件可能要加载2分钟(增加页面2分钟白屏时间). 只在字库中保留页面中出现的文字,将 ...
字蛛fontSpider的使用
字蛛官方文档 http://font-spider.org/index.html 首先安装全局包 npm install font-spider -g 然后下载字体 ,本次需要的是 "造 ...
android 字体文件压缩,Android 字体使用踩坑指南
Android 字体使用踩坑指南最近项目改版,根据ui的设计,需要使用到三字体.在使用过程中遇到一些坑,于是有了这个避坑指南! 字体压缩第一个坑!字体库的体积太大. 字体压缩的前提是要使用的内容是 ...
android 字体文件压缩,Android创建assets文件夹并使用字体图标（Icon Font）
首先我们要知道如何在AS中新建引用assets文件 1.将项目切换到Project模式 Project.png 2.要注意assets文件夹要跟Java文件在同一目录下,都包含在main的文件下面. ...
ttf类型的字体文件压缩
一般我们会在web项目中用到一些比较漂亮的字体,比如说fangzheng.ttf等这些字体,但是这些字段往往有好几MB,对网页不太友好,此时我们就想到把这些字体进行压缩,这里只说一下结论,font-s ...
html字体文件过大导致加载缓慢如何解决？
在网页设计中,美工通常要求前端使用自己的定义的字体,比如苹果的字体PingFangMedium.ttf, 而实际上除了英文和数字好看外,中文并不好看,特别是windows下,中文发虚.但是字体文件却特 ...
中文字体压缩器——字蛛
网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器字蛛通过分析本地 C ...

字体文件压缩——字蛛(FontSpider)

简介

安装

使用

运行 font-spider 命令

可能遇到的问题

字体文件压缩——字蛛(FontSpider)相关推荐

最新文章

热门文章