Benfont NPM | npm.io

benFont

基于fontmin可以针对不同的项目，字体生成使用

特点

支持同个页面使用多个字体
支持选择器，过滤生成特定字体

安装

在package.json中，添加benfont

npm install

引入

var benfont = require('benfont');
benfont.watch('../product/**/*.tpl', '../font/');

例如上面例子，是针对../product/下面的任意tpl文件，不限层级
../font/ 表示存放字体文件的文件夹,即源文件夹，可以自行百度字体ttf文件下载
tpl文件一旦修改，会在同等目录下生成一个font文件夹，里面放置所有需要的字体文件

使用

还需要在tpl文件头部声明，使用字体，及class选择器名称，例如
在模板中，添加下面的标记后，就能在模板对应的路径，生成font文件夹，放置字体文件

<input type="hidden" class='J_benfont' data-class='ben-font' value='syNormal'>

data-class为选择器名称，可以自定义,即需要提取的字的容器的class
value为字体名称，可以自行更改，但必须与，字体文件夹里面的字体名字保持一致(去掉.ttf后的名字)
class不能修改。
在scss文件中声明

@mixin fontBlock($name, $fontName) {
    font-family: $fontName;
    src: url("./font/" + $name + "_" + $fontName + ".eot");
    src:
    url("./font/" + $name + "_" + $fontName + ".eot?#font-spider") format('embedded-opentype'),
    url("./font/" + $name + "_" + $fontName + ".woff") format('woff'),
    url("./font/" + $name + "_" + $fontName + ".ttf") format('truetype'),
    url("./font/" + $name + "_" + $fontName + ".svg") format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    @include fontBlock('index', 'DINOffcPro-Cond');
}
.ben-font{
    font-family: 'DINOffcPro-CondBold';
}