Nonsense Parser Microframework

    grunt-font-spider

    0.1.5 • Public • Published

    字蛛 - grunt 插件

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

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

    特性

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

    安装

    npm install grunt-font-spider --save-dev

    使用范例

    在 CSS 中声明字体

    推荐的跨浏览器 @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 文件必须存在,其余的格式将由工具自动生成

    配置示例

    module.exports = function(grunt) {
        grunt.initConfig({
            // 拷贝文件到发布目录,这样字体可被反复处理
            copy: {
                main: {
                    src: './test/**',
                    dest: './dest/'
                },
            },
            // 字蛛插件:压缩与转码静态页面中的 WebFont
            'font-spider': {
                options: {},
                main: {
                    src: './dest/test/**/*.html'
                }
            }
        });
        grunt.loadNpmTasks('grunt-font-spider');
        grunt.loadNpmTasks('grunt-contrib-copy');
        grunt.registerTask('default', ['copy', 'font-spider']);
    };

    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 文件

    字体兼容性参考

    格式 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

    相关链接

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

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

    Install

    npm i grunt-font-spider

    DownloadsWeekly Downloads

    3

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • aui