font-carrier2
本项目 fork 自 font-carrier。 由于 font-carrier 无人维护,特此开一个新分支。做一些特性的更新与 bug 的修复。
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 =//创建空白字体对象var font = fontCarrier2//从其他字体解析var transFont = fontCarrier2
Step-2:拿到字体对象后,你就可以使用 SVG 随意操作字体了
//可以设置某个字对应的形状,当然 unicode 也是支持的font//也可以使用setGlyph可以设置更多信息font//可以针对字直接拿到对应的svgvar svg = font//也可以先拿到对应的字形对象,再导出对应的svgvar glyph = transFontglyph
Step-3:使用get,set各种操作完后,你可以选择导出字体
// 默认会导出 svg,ttf,eot,woff 四种字体,// 可以不传 path,这样会默认返回一个包含四个字体 buffer 的对象font
Step-4:导出字体后就可以在 Web 中使用了
我//此时渲染出来的图形就是你设置的 SVG的样子
Example
案例一
使用 SVG 设置一些 icon
var fontCarrier2 = // 创建空白字体,使用 SVG 生成字体var font = fontCarrier2var love = fsvar mail = fs //使用汉字font //使用unicodefont font
案例二
从其他字体导出一些图标到自己的库里
var fontCarrier2 =var transFont = fontCarrier2//改成存在的字体文件地址// 生成空白字体var font = fontCarrier2var gs = transFont// 设置到空白字体里面font/ /这样 font 导出的字体里面就有了「我是方正」对应的 SVG 形状了font
案例三
对中文字体精简
var fontCarrier2 =var transFont = fontCarrier2// 会自动根据当前的输入的文字过滤精简字体transFonttransFont
API
更多文档请看这里
Test
先确保安装依赖包 npm install
再运行npm test
之后访问 ./test/index.html
Licence
MIT