福野泰介の一日一創

文字はピクセルデータではなく、点と線で表すベクトルデータになっていて、手軽で美しいベジェ曲線に対応しているのがその秘密です。フォントデータを読み書きできるオープンソースなライブラリ opentype.js をフォークして、Denoやブラウザ上で気軽に使えるESモジュール化し、IchigoJamの新しいフォントを作ってみました。

「opentype.js – JavaScript parser/writer for OpenType and TrueType fonts.」src on GitHub
依存ライブラリ「tiny-inflate」もESモジュール化して、Node.js用に拡張子が省略されたimport表記に".js"を足し、ファイル読み書きをDeno用に変換してできあがり！

IchigoJamのフォントデータ「ichigojam-font.json」を使って、ドットを四角のPath表現にするプログラムを書けば、フォントが作成可能です。 const path = new Path(); const w = 8; const f = fontdata[i]; const o = SCALE / 10; for (let y = 0; y < 8; y++) { for (let x = 0; x < 8; x++) { if (parseInt(f.substring(y * 2, y * 2 + 2), 16) & (1 << (7 - x))) { const y2 = 7 - y; path.moveTo(x * SCALE + o, y2 * SCALE + o); path.lineTo((x + 1) * SCALE - o, y2 * SCALE + o); path.lineTo((x + 1) * SCALE - o, (y2 + 1) * SCALE - o); path.lineTo(x * SCALE + o, (y2 + 1) * SCALE - o); } } } oがドット間の隙間です。0にするといつものフォントになりますよ。(src on GitHub)

「IchigoJam dot font」、インストールしてお使いいただけます！

「opentype.js glyph inspector」src on GitHub
サンプルアプリ、フォントの中身が見られるグリフインスペクターもopentype-esで動いてます。UIを作れば気になる箇所を自分で修正するツールにもできますね！ベジェ曲線を使って、角丸ドットにしてみるのもかわいいかも？