fontcarrier-生成字体操作记录

jiezi

5 年前

主要是公司内部的 SVG 制作的图标, 提供网页当中使用的字体.
代码仓库在 https://github.com/jimengio/j…

从 SVG 文件到可以给前端用的 npm 模块, 主要经过:

SVG 文件使用第三方模块生成字体文件 (ttf, svg, woff…)
生成图标跟 CSS 的映射
生成 TypeScript 组件当中使用枚举类型
打包更新 npm 模块

生成字体文件跟 CSS 映射我们之前用的是 webfonts-generator,
不过这个模块已经停止维护了, npm 上的版本还是有 bug 的, 主分支的还好一点.
考虑到使用不方便, 一致在寻找替代方案. 在一丝的指导下切换到了 font-carrier.

font-carrier 可以生成字体, 以及基础的 CSS 文件.
不过跟 webfonts-generator 不一样的是生成的 CSS 不要 class 来区分图标,
而是用 HTML 当中 utf8 字符直接跟图标字体对应 … 当然原理跟以前一样..

<i
  dangerouslySetInnerHTML={{__html: `&#${fontsDict[props.name]}` || `NONE:${props.name}` }}
></i>

生成字体文件的代码就是调用 font-carrier 的 API,
另外自己记录了一个 dict JSON 对象, 用来存储码表 …

initialFontValue = 0xe000

String.fromCharCode(initialFontValue)

fonts = fontCarrier.create()

dict = {}

icons.forEach (icon) ->
  initialFontValue += 1
  char = String.fromCharCode initialFontValue
  fonts.setSvg(char, fs.readFileSync("./svg/#{icon}.svg").toString())
  dict[icon] = initialFontValue

fonts.output
  path: './src/fonts/jimo'

然后主要是生成类型文件的工作.. 基于 dict 数据生成 enum, 基本够用.

使用 font-carrier 过程当中有遇到一些问题, 联系维护者解决掉了,

图标形状奇怪

遇到一个圆弧反向的问题, 本来不知道怎么下手, 用 Glyphs 看了 TTF 文件的线条,,
注意到所有的线条跟原先的 SVG 在 Sketch 里面刚好反向了, 就怀疑是转的问题,
SVG 的 arc 圆弧有一个 SWEEP 值, 表示圆弧的方向, 就觉得是这个用错了.
维护者排查了一下, 是已知的问题, 在 svgpath 模块当中已经解决:
https://github.com/fontello/s…
最后靠升级依赖的版本解决掉了, 按说后续不会再遇到.

图标居中出现问题

图标对应的是 UTF8 的字符, 最开始我选择的数值比较小, 主要跳过常用的码位.
不过当时出现了问题, 就是图标左右居中不正常, 有很多明显往左边偏移 …
排查以后原因是选择的码位范围有问题, 刚好命中了一些奇怪的字符 …
维护者推荐的码位范围是 0xe000 以上, 我估计对应的是空白的 UTF8 码位. 解决了.

曲线闭合问题

从接手项目的时候就提到了 SVG 的图标需要曲线闭合,
不是完全懂什么意思, 估计是路径要求闭合, 方便字体填充颜色之类的.
设计师没处理好的话, 图标是显示空白的. 用 https://iconfont.cn 可以验证.

另外一丝推荐的方案是我们设计师直接用 https://www.iconfont.cn 维护.
工具上可以提供 CSS 还有码位的导出, 比起我们手工处理要省事一点.
没想清楚, 后续如果有契机而且设计师可以维护的话, 考虑是否迁移过去.

fontcarrier-生成字体操作记录

字体生成步骤

遇到的坑

其他