iconfont字体解决方案
发布在js从零单排2015年6月12日view:3791IconFont
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

如果你还不知道什么是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。

评论
发表评论
4年前
赞了此文章!
WRITTEN BY
竹隐
前端。。。
TA的新浪微博
PUBLISHED IN
js从零单排

js从零单排

我的收藏