font-carrier 生成字體操做記錄

主要是公司內部的 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 還有碼位的導出, 比起咱們手工處理要省事一點.
沒想清楚, 後續若是有契機並且設計師能夠維護的話, 考慮是否遷移過去.

---

其餘關於積夢前端的模塊和工具能夠查看咱們的 GitHub 主頁 https://github.com/jimengio .
目前團隊正在擴充, 招聘文檔見 GitHub 倉庫 https://github.com/jimengio/h... .