• Stars
    star
    189
  • Rank 204,649 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

字蛛 gulp 插件

字蛛 - gulp 插件

字蛛是一个中文 WebFont 自动化压缩工具,它能自动分析页面使用的 WebFont 并进行按需压缩,无需手工配置。

官方网站:http://font-spider.org

特性

  1. 按需压缩:从原字体中剔除没有用到的字符,可以将数 MB 大小的中文字体压缩成几十 KB
  2. 简单可靠:完全基于 HTML 与 CSS 分析进行本地处理,无需 js 与服务端辅助
  3. 自动转码:将字体转码成所有浏览器支持的格式,包括老旧的 IE6 与现代浏览器
  4. 图标字体:除了常规的字体支持外,还支持图标字体(字蛛 v1.0.0 新特性)

安装

npm install gulp-font-spider --save-dev

使用

var gulp = require( 'gulp' );
var fontSpider = require( 'gulp-font-spider' );
	
gulp.task('fontspider', function() {
	return gulp.src('./index.html')
		.pipe(fontSpider());
});

gulp.task('defualt', ['fontspider']);

推荐的跨浏览器 @font-face CSS 写法:

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

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

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

API

fontSpider(options)

options

{
    /**
     * 忽略加载的文件规则(支持正则) - 与 `resourceIgnore` 参数互斥
     * @type    {Array<String>}
     */
    ignore: [],

    /**
     * 映射的文件规则(支持正则) - 与 `resourceMap` 参数互斥 - 可以将远程字体文件映射到本地来
     * @type    {Array<Array<String>>}
     * @example [['http://font-spider.org/font', __diranme + '/font'], ...]
     */
    map: [],

    /**
     * 是否支持备份原字体
     * @type    {Boolean}
     */
    backup: true,

    /**
     * 是否对查询到的文本进行去重处理
     * @type    {Boolean}
     */
    unique: true,

    /**
     * 是否排序查找到的文本
     * @type    {Boolean}
     */
    sort: true,

    /**
     * 是否支持加载外部 CSS 文件
     */
    loadCssFile: true,

    /**
     * 是否忽略内部解析错误-关闭它有利于开发调试
     * @type    {Boolean}
     */
    silent: true,

    /**
     * 请求超时限制
     * @type    {Number}    毫秒
     */
    resourceTimeout: 8000,

    /**
     * 最大的文件加载数量限制
     * @type    {Number}    数量
     */
    resourceMaxNumber: 64,

    /**
     * 是否缓存请求成功的资源
     * @type    {Boolean}
     */
    resourceCache: true,

    /**
     * 映射资源路径 - 与 `map` 参数互斥
     * @param   {String}    旧文件地址
     * @return  {String}    新文件地址
     */
    resourceMap: function(file) {},

    /**
     * 忽略资源 - 与 `ignore` 参数互斥
     * @param   {String}    文件地址
     * @return  {Boolean}   如果返回 `true` 则忽略当当前文件的加载
     */
    resourceIgnore: function(file) {},

    /**
     * 资源加载前的事件
     * @param   {String}    文件地址
     */
    resourceBeforeLoad: function(file) {},

    /**
     * 加载远程资源的自定义请求头
     * @param   {String}    文件地址
     * @return  {Object}
     */
    resourceRequestHeaders: function(file) {
        return {
            'accept-encoding': 'gzip,deflate'
        };
    }
}

使用场景限制

  • 仅支持固定的文本与样式,不支持 javascript 动态插入的元素与样式
  • .otf 字体需要转换成 .ttf 才能被压缩
  • 仅支持 utf-8 编码的 HTML 与 CSS 文件
  • CSS content 属性只支持普通文本,不支持属性、计数器等特性

字体兼容性参考

格式 IE Firefox Chrome Safari Opera iOS Safari Android Browser Chrome for Android
.eot 6 -- -- -- -- -- -- --
.woff 9 3.6 5 5.1 11.1 5.1 4.4 36
.ttf -- 3.5 4 3.1 10.1 4.3 2.2 36
.svg -- -- 4 3.2 9.6 3.2 3 36

来源:http://caniuse.com/#feat=fontface

贡献者

相关链接

=============

字体受版权保护,若在网页中使用商业字体,请联系相关字体厂商购买授权

More Repositories

1

art-template

High performance JavaScript templating engine
JavaScript
9,851
star
2

font-spider

Smart webfont compression and format conversion tool
JavaScript
5,005
star
3

artDialog

经典的网页对话框组件
JavaScript
3,133
star
4

tmodjs

前端模板外置解决方案
JavaScript
665
star
5

pinyin-engine

JavaScript 拼音匹配引擎
HTML
471
star
6

angular-popups

基于Angularjs的浮层组件
HTML
117
star
7

popupjs

W3C HTML5 Dialog Plus
JavaScript
112
star
8

art-template-loader

art-template loader for webpack
JavaScript
106
star
9

node2bat

基于JScript的迷你NodeJS运行时
Shell
57
star
10

angular-drag

基于Angularjs的拖拽指令
HTML
55
star
11

browser-x

一个基于 NodeJS 实现的虚拟浏览器
JavaScript
49
star
12

jsonp-sandbox

jsonp sandbox
JavaScript
49
star
13

express-art-template

art-template for express
JavaScript
44
star
14

koa-art-template

a koa view render middleware, support all feature of art-template
JavaScript
41
star
15

grunt-font-spider

字蛛 grunt 插件
JavaScript
35
star
16

include-file

HTML 静态文件局部模板批量更新工具
HTML
23
star
17

blog

18
star
18

art-template-docs

art-template document
JavaScript
12
star
19

grunt-unwrap

将 CMD 模块转换成不依赖加载器的工具
JavaScript
9
star
20

vs-code-github-markdown-theme

vs code: markdown theme
CSS
7
star
21

koa-gitlab

simple gitlab auth middleware for koa
JavaScript
4
star
22

devtools-watcher

DevTools Watcher
HTML
3
star
23

sublime-art

art-template syntax definition for Sublime Text 3
3
star
24

file-cache-webpack-plugin

Webpack plugin that persists the compiler cache to the file system
JavaScript
2
star
25

free-fonts

收录字蛛可以压缩并且免费的字体
2
star
26

amd-to-commonjs

JavaScript
1
star
27

ISPAdBlock

ISP 广告拦截器
1
star
28

hexo-renderer-art

art-template renderer for Hexo
JavaScript
1
star