iconfont字体解决方案
发布于 1个月前 作者 purplebamboo 181 次浏览 来自 分享

如果你还不知道什么是iconfont技术，请先参考这篇文章

也许你用过iconmoon，或者用过我们的iconfont.cn。

这两个平台的理念都是为了让用户更简单方便的生成自己想用的web字体。

在平台上上传svg，设置对应的unicode，就可以生成对应的字体。

平台化有平台化的好处，但是还是有些小伙伴想自己自定义生成过程。想自己玩些花样。经常有小伙伴们问我们为什么不把iconfont相关的技术开源呢。

现在来了，font-carrier 纯node版本的iconfon解决方案。如果你是个开发者，如果你想自己整点东西。font-carrier都可以帮到你。

font-carrier是一个功能强大的字体操作库，使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。

简单四步看下使用方式：

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的样子

font-carrier绑你屏蔽了svg到字体的转换过程，让你可以通过svg直接生成对应的字体。

详情请看这里:https://github.com/purplebamboo/font-carrier

如果觉得有用，就给个star吧。目前还处于测试阶段，欢迎提bug。

回到顶部