LovyanGFXやM5GFXで便利なLGFXFontToolJsを作成

概要

LovyanGFXやM5GFXでフォント関係を触るときに便利なフォント系のツールをJavaScriptで作成してみました。フォント一覧の他に自作フォントを文字セット指定して作成したり、自作のHtmlなどで内蔵フォントでプレビューの文字を出す機能などがあります。

制作物

GitHub – tanakamasayuki/LGFXFontToolJs
Contribute to tanakamasayuki/LGFXFontToolJs development by creating an account on GitHub.

上記がリポジトリになります。

Just a moment…

JavaScriptのライブラリですので、NPMでも配布しています。通常はこのライブラリを直接使うことは少ないと思います。

フォントビュアー

LGFX Font Tool JS — Viewer

LovyanGFXやM5GFXで内蔵されているフォント一覧の中身を確認することが可能です。実データを利用してブラウザ上でレンダリングしています。収録されている文字の範囲や実際にどのように表示されるのかを確認することができます。

ジェネレーター

LGFX Font Tool JS — Generator

Google Fontsなどの再配布可能なフォントを利用して、文字種と大きさなどを設定して自作フォントが生成可能です。内蔵フォント以外で利用したい場合には自作する必要があります。特定文字だけ埋め込むことも可能ですので利用用途に合わせて生成が可能です。

コンバータ

自作フォントなどの形式を変換可能です。バイナリデータの他に.h形式に対応しています。実際に利用することはあまりないかもしれませんが、ライブラリ内部で埋め込みフォントを共通フォーマットへ取り込むときなどに利用している機能となります。

インスペクタ

こちらもライブラリ内部で利用している機能でフォントデータを分析して、どんな文字セットで文字の設定がどうなっているか、他の形式に変換したときにどんなサイズになるのかなどを分析する画面になります。

まとめ

フォント系のヘルパーはいろいろ作っていたのですが、このツールに統合することにしました。特に実データを利用して画面に描画可能ですのでブラウザ上でのレイアウトツールなどで便利に利用が可能です。

その他自作フォント作成やフォントビュアーなども便利に使えると思います。

コメント