福野泰介の一日一創

「IchigoJam/font - GitHub」

- 角がまるっこい「IchigoJam_font_round」
- 1ドット毎独立した「IchigoJam_font_dot」
- おまけにわずかに角をまるめた「IchigoJam_font」

PC、Macでインストールして使えます。

mojikibanのKana.jsと、IchigoJam web で使っているコード対応を使って、ひらがな、カタカナ、半角カタカナのフォントとして登録しています。（with Kana.kata2hira）

「opentype.js - live demo」
ちゃんとフォントになっています！

SVGのパスを表す文字列を字句解析して、opentype.jsのPathに対応するデータを生成するコードは「parsePathCommands.js」が肝。

import { Path } from "https://code4fukui.github.io/opentype-es/opentype.js"; import { parsePathCommands } from "./parsePathCommands.js"; export const svg2path = (svg) => { const n = svg.indexOf("d=\""); const m = svg.indexOf("\"", n + 3); const d = svg.substring(n + 3, m); const path = new Path(); path.commands = parsePathCommands(d); return path; }; svg2path.js、ひとまず一つのpathのみ対応版。複数要素やrectなどに対応すると使えるシーンが広がります。

SVGのパスにはあるarcはフォントのパスには対応していないので、曲線は二次ベジェと三次ベジェで表現しましょう！