font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。
Switch branches/tags
Nothing to show
Clone or download
weikang.zhuwk
weikang.zhuwk update
Latest commit 78b47a4 Apr 25, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc 修改文档cuowu Jun 18, 2015
lib 修复拼写错误 Apr 25, 2016
test 增加配置参数,导出不带viewport Mar 2, 2016
.gitignore 删除nodemodule Jun 18, 2015
.travis.yml 增加测试 Jun 18, 2015
package.json update Apr 25, 2016
readme.md Update readme.md Nov 19, 2015

readme.md

font-carrier

npm version Build Status

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。

一个字体font,包含若干字形glyph。比如我们浏览器里渲染,浏览器就会去当前设置的font里面找到 对应的字形glyph,使用它的形状来渲染。不同的字体的的字形形状不一,所以才有差别。

font-carrier封装了简单的api,让你可以将某个svg,设置成一个字对应的字形。也可以通过解析已有字体,拿到某个字在这个字体下面对应的svg。让你通过svg的维度随意修改字体展现样式。

我们不生产字体,我们只是字体的搬运工

  • 需要图形操作客户端,请移步panda
  • 需要命令行解析代码,按需精简字体,请移步 font-collector

features

  • 支持创建一个空白字体
  • 支持解析已有字体(ttf,svg)
  • 支持使用svg来设置字的展现
  • 支持解析svg的各种转换还有各种非path图形
  • 支持针对某一个字,导出对应的svg
  • 支持导出四种浏览器主流字体(ttf,eot,woff,svg)
  • 支持设置各种字体相关内容

getting start

如果对iconfont还不是很了解的,请先参考这篇文章

install

npm install font-carrier --save

use

step-1.创建一个空白字体,或者解析一个已有的字体,这样都可以得到一个字体对象

var fontCarrier = require('font-carrier')

//创建空白字体对象
var font = fontCarrier.create()

//从其他字体解析
var transFont = fontCarrier.transfer('./test/test.ttf')

step-2.拿到字体对象后,你就可以使用svg随意操作字体了

//可以设置某个字对应的形状,当然unicode也是支持的
font.setSvg('',fs.readFileSync('./test/svgs/circle.svg').toString())

//也可以使用setGlyph可以设置更多信息
font.setGlyph('',{
  glyphName:'',
  horizAdvX:'1024',//设置这个字形的画布大小为1024
  svg:fs.readFileSync('./test/svgs/circle.svg').toString()
})

//可以针对字直接拿到对应的svg
var svg = font.getSvg('')

//也可以先拿到对应的字形对象,再导出对应的svg
var glyph = transFont.getGlyph('')
glyph.toSvg()

step-3.使用get,set各种操作完后,你可以选择导出字体

//默认会导出svg,ttf,eot,woff四种字体,
//可以不传path,这样会默认返回一个包含四个字体buffer的对象
font.output({
  path:'./iconfont'
})

step-4.导出字体后就可以在web中使用了

<style type="text/css">
  @font-face {font-family: 'iconfont';
      src: url('iconfont.eot'); /* IE9*/
      src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('iconfont.woff') format('woff'), /* chrome、firefox */
      url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  }

  .iconfont{font-family:"iconfont";font-size:16px;font-style:normal;}
</style>

<i class="iconfont">我</i>
//此时渲染出来的图形就是你设置的svg的样子

example

案例一

使用svg设置一些icon

var fontCarrier = require('font-carrier')
//创建空白字体,使用svg生成字体
var font = fontCarrier.create()
var love = fs.readFileSync('./test/svgs/love.svg').toString()
var mail = fs.readFileSync('./test/svgs/mail.svg').toString()

//使用汉字
font.setGlyph('',{
  svg:love,
  glyphName:''
})

//使用unicode
font.setSvg('&#xe601;',mail)

font.output({
  path:'./test'
})

案例二

从其他字体导出一些图标到自己的库里

var fontCarrier = require('font-carrier')
var transFont = fontCarrier.transfer('./test/test.ttf')//改成存在的字体文件地址
//生成空白字体
var font = fontCarrier.create()

var gs = transFont.getGlyph('我是方正')
//设置到空白字体里面
font.setGlyph(gs)

//这样font导出的字体里面就有了'我是方正'对应的svg形状了
font.output({
  path:'./test'
})

案例三

对中文字体精简

var fontCarrier = require('font-carrier')
var transFont = fontCarrier.transfer('./test/test.ttf')
//会自动根据当前的输入的文字过滤精简字体
transFont.min('我是精简后的字体,我可以重复')
transFont.output({
  path:'./min'
})

api

更多文档请看这里

test

先确保安装依赖包 npm install 再运行npm test之后访问 ./test/index.html

licence

MIT