Nightingale Posing Mischievously
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

benfont

1.1.0 • Public • Published

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';
}
  • $name 表示模板的名字,字体文件跟着模板生成的,所以需要传入模板的名字
  • $fontName 表示ttf文件夹里面的字体名字。然后声明font-family的时候也要保持一致

谢谢浏览ヾ(。´・_●・`。)☆

Keywords

none

install

npm i benfont

Downloadsweekly downloads

12

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability