Grunt-font-manager NPM

grunt-font-manager

更易用的字体图标管理方案

字体管理

使用iconfont.cn管理字体图标存在以下弊端

在不同的项目中会使用相同的备注名称，不利于项目管理，如

star.svg上传后备注为“星星”。在项目1中，“用户评价”图标为star.svg，项目2中“等级排名”图标为star.svg，但是备注都显示为“星星”，且无法在项目里修改

为方便后期修改扩展，同一个项目中两个图标类名不同，但图标相同。使用iconfont.cn管理需要再次上传一个相同的svg才行。如

任务删除 ifont-task-del 清空邮箱 ifont-email-clean

iconfont.cn不支持只更新svg信息，svg修改后，需要重新上传，然后添加到项目，同时从项目里删除旧图标，另外需要保持新旧图标的class和unicode信息一致，操作繁琐。
项目中可能会使用其他ttf中的图形，需要提取ttf中指定字符的svg，然后上传到项目中才可以实现ttf合并

使用方法

建立如下文件结构

|--font
    |--svg/
        |--*.svg
    |--fonts/
        |--*.ttf
    |--font.json

font.json内容如下

{
    "fontName":"ifontxlds",
    "fonts":[
        {
          "name":"task_level",
          "unicode":"f000",
          "file":"svg/task_level.svg",
          "note":"任务优先级"
        },
        {
          "name":"task_save",
          "unicode":"f001",
          "file":"./fonts/iconfont.ttf#f005",
          "note":"保存任务"
        }
    ]
}

配置grunt

     grunt.initConfig({
            fontmanager : {
                xlds:{
                    options:{
                        svgPath:'./font/svg/'
                    },
                    files:[{
                        src:'font/font.json',
                        dest:'css/fonts/'
                    }]
                }
            }
     });