概要
組み込みデバイスのフォントは、パソコンで使うフォントと少し仕組みが違います。このガイドでは、変換が必要な理由と PicoPixel での作成手順を説明します。付属フォントや自分のフォントの使い方から、右から左に書く言語、日本語・中国語・韓国語のように文字数の多い言語の設定、未使用フォントの整理まで扱います。
フォントの変換が必要な理由
.ttf や .otf ファイルでは、文字の形を曲線で表現します。パソコンは十分な処理能力とメモリを持つため、その曲線をさまざまなサイズで滑らかに描画できます。
ESP32 やスマートウォッチ、小型ディスプレイのコントローラーでは、使えるメモリや処理能力が限られています。そこで LVGL では、固定サイズであらかじめ描いた小さな画像、つまりビットマップとして文字を保存します。その場で曲線を描くより負荷を抑えられます。
PicoPixel は、元のフォントを LVGL 向けのビットマップに変換します。使う文字とサイズを選ぶだけで作成できます。
変換後のフォントは、作成時に選んだサイズで使います。16 px のフォントを 32 px に拡大すると、輪郭がぼやけます。両方のサイズが必要なら、それぞれ作成してください。フォントを作成する手順では、複数のサイズをまとめて選べます。
文字やサイズを増やすほど、デバイス上で使うメモリも増えます。実際に使う文字とサイズに絞ることが、容量を抑えるポイントです。
付属フォントとアップロード
フォントの選び方は 2 つあります。
- Bundled：PicoPixel に用意された、動作確認済みのフォントを使います。Noto Sans、Roboto、Open Sans、Montserrat、Poppins、Inter、Lato、Nunito、Source Sans 3 などがあり、まず試す場合にも適しています。
- Upload：自分の
.ttfまたは.otfをアップロードします。指定のブランドフォントを使いたい場合や、付属フォントにない言語を扱う場合に便利です。
アップロードには、Roboto-VariableFont.ttf のような可変フォントより、Roboto-Regular.ttf のような固定ウェイトのファイルを使ってください。変換が安定しやすく、通常の .ttf が扱いやすい形式です。
どちらも、作成前にプレビューへ文字を入力して見た目を確認できます。
フォントを作成する
Create Font パネルで、次の項目を設定します。
- フォントを選ぶ：Bundled から選び、Regular や Bold などの太さを指定します。自分のファイルなら Upload タブを使います。
- Font Name：プロジェクトの一覧に表示する名前です。複数使う場合も見分けやすい名前を付けます。
- Size (px)：文字サイズです。16、22、32 などのプリセットから複数選べます。サイズごとに別のフォントが生成されるため、使うものだけを選びます。
- Letters：含める文字体系を選びます。Standard は基本的な英字、ほかに Latin、Greek、Cyrillic、Hebrew、Arabic、Thai などがあります。
- Asian：中国語・日本語・韓国語向けの設定です。文字数が多いため、専用の手順で扱います。
Advanced では、Bits per Pixel や文字範囲、個別の文字を指定できます。Bits per Pixel は文字の濃淡の細かさで、高いほど滑らかになりますが容量も増えます。通常は 4 bpp が目安です。細かな調整が不要なら初期設定のままで構いません。
フォントによって対応する言語は異なります。文字の代わりに四角が表示される場合は、その文字を含む付属フォントを選ぶか、対応するフォントをアップロードしてください。選択した文字体系にフォントが対応していない場合は、PicoPixel に警告が表示されます。
右から左に書く言語：アラビア語・ヘブライ語
これらの言語は右から左に読み、文字の表示にも専用の処理が必要です。Create Font パネルから設定できます。
- Letters で Arabic または Hebrew を選びます。必要な文字がフォントに含まれます。基本的な英字も一緒に含まれるため、数字やラテン文字も使えます。
- Noto Sans Arabic など、PicoPixel が提案する対応フォントを選びます。通常のラテン文字用フォントでは、必要な文字が含まれないことがあります。
- プレビューを確認します。四角が表示される場合は、別の対応フォントに切り替えます。
アラビア文字は、単語内の位置によって形が変わります。エクスポート時に PicoPixel がアラビア語・ペルシア語・ヘブライ語の使用を検出し、文字の接続に必要な LVGL 設定を有効にします。
Letters で Arabic または Hebrew を選び、最初から必要な文字を含めてください。通常のフォントを作った後に右から左に書くテキストを追加しても、足りない文字が自動で追加されるわけではありません。
中国語・日本語・韓国語
CJK は Chinese、Japanese、Korean の略です。これらの言語は文字数が多く、韓国語には約 11,000、中国語には 20,000 を大きく超える文字があります。すべてをビットマップにすると数 MBになり、小型デバイスの容量に収まらないことがあります。
そこで、UI に表示する文字だけを含めます。一般的な画面なら、使う文字の種類が 100 前後に収まることもあり、容量を大きく減らせます。
- Asian で Korean、Chinese、Japanese のいずれかを選びます。
- Advanced 内の Symbols に、UI に表示するテキストをすべて貼り付けます。ラベル、ボタン、メッセージを漏れなく含めてください。入力された文字だけがフォントに含まれます。
Symbols には、選んだ言語の「設定」「確認」「キャンセル」などの基本的な UI 用語があらかじめ入力されます。自分の画面で使うテキストを追加してください。これにより、数 MB になるフォントを数百 KB 程度に抑えられる場合があります。
Symbols に入れた文字だけが含まれます。後から未登録の文字を表示すると四角になるため、テキストを変更したら Symbols も更新し、フォントを作り直してください。
使用する書体が決まっている場合は、そのフォントをアップロードすると細かく調整できます。UI の全文をまとめて貼り付けると、文字の漏れを防ぎやすくなります。
未使用フォントを整理する
16 px と 22 px を比べるなど、試しているうちに使わないフォントが増えることがあります。採用するサイズが決まったら、不要なものを削除して容量を空けましょう。
アセットの Fonts 欄にある Delete Unused Fonts を使うと、プロジェクト内のウィジェットを調べ、どこからも参照されていないフォントをまとめて削除できます。
いくつかのサイズを作って見比べ、使うものを決めてから Delete Unused Fonts で整理すると便利です。一覧には各フォントのサイズと品質設定が表示されます。
削除対象は、どのウィジェットでも使われていないフォントだけです。デザインの表示は変わりません。個別に削除する場合は一覧で右クリックしてください。誤って削除した場合は、元に戻す操作で復元できます。
