Skip to content
本项目 fork 自 font-carrier。 由于 font-carrier 无人维护,特此开一个新分支。font-carrier2是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。
Branch: master
Clone or download
Pull request Compare This branch is 10 commits ahead of purplebamboo:master.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc 0.2.0 版本 Jun 3, 2019
lib 0.2.0 版本 Jun 3, 2019
test 修改测试用例,使用了 let const 新特性 导致在 node 4下无法通过ci Jun 3, 2019
.gitignore 删除nodemodule Jun 18, 2015
.travis.yml New: 支持 woff2 字体格式 Dec 13, 2018
package.json 0.2.0 版本 Jun 3, 2019
readme.md update readme May 30, 2019

readme.md

font-carrier2

本项目 fork 自 font-carrier。 由于 font-carrier 无人维护,特此开一个新分支。做一些特性的更新与 bug 的修复。

npm version Build Status

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

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

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

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

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

Features

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

Getting Start

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

Install

npm install font-carrier2 --save

Use

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

var fontCarrier2 = require('font-carrier2')

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

//从其他字体解析
var transFont = fontCarrier2.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('woff2'),
    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>

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

Example

案例一

使用 SVG 设置一些 icon

var fontCarrier2 = require('font-carrier')
// 创建空白字体,使用 SVG 生成字体
var font = fontCarrier2.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 fontCarrier2 = require('font-carrier2')
var transFont = fontCarrier2.transfer('./test/test.ttf')//改成存在的字体文件地址
// 生成空白字体
var font = fontCarrier2.create()

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

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

案例三

对中文字体精简

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

API

更多文档请看这里

Test

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

Licence

MIT

You can’t perform that action at this time.