fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

font-spider
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://font-spider.org
GitHub:https://github.com/aui/font-spider
网站描述:一个智能 WebFont 压缩工具

font-spider是一个智能自动化压缩工具,它能自动分析页面使用的 WebFont 并进行按需压缩,并不需要指定字体与字符。  


特性

  1. 压缩字体:智能删除没有被使用的字形数据,大幅度减少字体体积
  2. 生成字体:支持 woff2、woff、eot、svg 字体格式生成


安装

npm install font-spider -g


一、书写 css

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

/*使用指定字体*/
.home h1, .demo > .test {
    font-family: 'source';
}

特别说明: @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成


二、压缩 WebFont

font-spider [options] <htmlFile1 htmlFile2 ...>

htmlFiles

一个或多个页面地址,支持 http 形式。

options

-h, --help                    输出帮助信息
-V, --version                 输出当前版本号
--info                        输出 WebFont 的 JSON 描述信息,不压缩与转码
--ignore <pattern>            忽略的文件配置(支持正则表达式)
--map <remotePath,localPath>  映射 CSS 内部 HTTP 路径到本地(支持正则表达式)
--no-backup                   关闭字体备份功能
--debug                       调试模式,打开它可以显示 CSS 解析错误

链接: https://fly63.com/nav/1707

more>>
相关栏目
IconBrew
国外免费开源的图标库
官网
Twemoji
witter团队提供的强大表情符号库
官网GitHub
octicons
GitHub发布的一组开发原始码的免费素材图标
官网GitHub
feather icons
免费开源的简单而美丽的ICON图标集合
官网GitHub
BlendIcons
免费世界顶级图标库
官网
寻图标
功能强大图标内容丰富的icon图标库
官网
lordicon
令人难忘的动画图标素材
官网
favico.js
一款网页图标插件,让网页图标动起来
官网GitHub
Iconhunt
一个图标搜索引擎
官网
Picography
国外高分辨率和免费图片素材高分辨率来源之一
官网
ikonate
完全可定制的矢量图标
官网GitHub
shields
有各种各样的小图标,以及很多自定义的方案
官网GitHub
Share Icon
免费矢量素材图库
官网
iconninja
近百万免费图标素材的搜索引擎
官网
iconstore
一个设计感比较强的图标网站
官网
WallHere
一个著名的高清壁纸下载网站
官网

手机预览