M5Stack & ESP32で、日本語を表示方法は、いくつかありますがこの記事では、TTFフォント(True Typeフォント)を使用して日本語の表示を行う方法について説明します。最初に、組み込み可能なフォントもご紹介します。
TTFフォントの表示には、OpenFontRenderライブラリを使用するのが便利です。
フォントの種類について
フォントには、文字の幅の扱い方の違いで2種類のフォントがあります。等幅フォント(Monospaced Font)とプロポーショナルフォント(Proportional Font)です。それぞれの特徴と用途について説明します。
等幅フォント(Monospaced Font)
等幅フォントは、すべての文字の幅が同じです。そのため、文字間隔が均一になり、表やソースコードなど、整列性を重視する場面でよく使用されます。
長所
- 文字間隔が均一で、表やソースコードなどの整列性が良い
- プログラミング言語のソースコードなど、シンボルと文字が混在する場面で読みやすい
短所
- 長文の文章を読むと、ぎこちなく感じる場合がある
- 文字によっては、無駄なスペースが空いてしまう場合がある
プロポーショナルフォント(Proportional Font)
プロポーショナルフォントは、文字によって幅が異なります。例えば、「i」のような細い文字は「W」のような太い文字よりも幅が狭くなります。そのため、自然な読み心地になり、長文の文章を読むのに適しています。
長所
- 長文の文章を読むと、自然な読み心地になる
- 文字の形に合ったスペースが使われるので、見た目的に美しい
短所
- 文字間隔が均一ではないので、表やソースコードなどの整列性が悪くなる
- プログラミング言語のソースコードなど、シンボルと文字が混在する場面で読みづらい場合がある
おすすめのTTFフリーフォント
M5Stack、ESP32(16MBのフラッシュメモリタイプ)で、プログラムに組み込み可能なフリーフォントをご紹介します。
Uemaruフォント:縦長で等幅の丸ゴシックフリーフォント
Uemaruフォントは、英数字も含め等幅フォントです。
尚、フォント名は「文字の上に半濁点(マル)をつける」ことから命名したとのことです。
特徴
- 丸ゴシックの等幅フォント。
- 少し縦長の字形。
- 濁点・半濁点は文字の上に付く。
- 半濁点が大きめ。
- JIS第1・第2水準の文字をすべて収録。
- 「モトヤLマルベリ3等幅」に存在しない記号をいくつか「M+ OUTLINE FONTS」から追加した。
- 「あ」+「゛」のような濁点・半濁点合成字形を収録。外字または合字として使用可能。
仕様
- 縦書きに非対応。
- 濁点・半濁点合成字形は「合字としては」Adobe製品では使用不可。外字としては可能。
- ウェイト(太さ)はRegularしかない。
表示例
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
Uemaruフォント | Uemaru-Regular.ttf | 2.79MB | Apache_License_2.0 |
モトヤLマルベリ3等幅 MotoyaLMaru/Kosugi Maru
モトヤLマルベリ3等幅とKosugi Maruフォントは、どちらも日本語の丸ゴシックの等幅フォントです。モトヤLマルベリ3等幅とKosugi Maruフォントは、元々は同一のフォントであり、「MotoyaLMaru W3 mono」という名称で販売されていました。その後、2012年にフォントワークス株式会社がモトヤフォントファミリーのライセンスを取得し、モトヤLマルベリ3等幅に改名されました。一方、Kosugi Maruフォントは、2016年にGoogle Fontsに収録される際に、現在の名称に変更されました。
以下、モトヤLマルベリ3等幅フォントの特徴です。
- ファイル名:モトヤLマルベリ3等幅 MotoyaLMaru.ttf
- 商業:無料の商用フォント
- フォント分類:商用OK
- ファイル拡張子:.ttf
- ファイルサイズ:2.44Mb
- フォント名:MotoyaLMaru
- フォント スタイル:W3 mono
- フォント識別ID:MTY MotoyaLMaru-W3-90ms-RKSJ-H
- 完全なフォント名:MotoyaLMaru W3 mono
- フォントバージョン:Version 1.01
- 重さ:400
- PostScript:MotoyaLMaru-W3-90ms-RKSJ-H
- 著作権情報:Copyright(C)2010 MOTOYA CO.,LTD.
表示例
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
モトヤLマルベリ3等幅 MotoyaLMaru | MotoyaLMaru.ttf | 2.44MB | Apache_License_2.0 |
Kosugi フォント | Kosugi-Regular.ttf | 2.18MB | Open Font License. |
Kosugi Maruフォント | KosugiMaru-Regular.ttf | 3.40MB | Open Font License. |
さわらびフォント
さわらびフォントは、Creative Commons Attribution 3.0 ライセンスで公開されている日本語TrueTypeフォントです。さわらびゴシック(Sawarabi Gothic)およびさわらび明朝(Sawarabi Mincho)の2種類が公開されています。
特徴
さわらびフォントには、以下の特徴があります。
- すべての文字が作者のオリジナルデザイン
- 高い可読性を追求した設計
- 小さいサイズでも文字がはっきり見える
- シンプルでクラシカルなデザイン
- ウェブサイト、印刷物、同人誌など幅広い用途で利用可能
さわらびゴシック(Sawarabi Gothic)
さわらび明朝(Sawarabi Mincho)
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
さわらびゴシック(Sawarabi Gothic) | SawarabiGothic-Regular.ttf | 1.81MB | Open Font License. |
さわらび明朝(Sawarabi Mincho) | SawarabiMincho-Regular.ttf | 1.03MB | Open Font License. |
ZEN 角ゴシック New(Zen Kaku Gothic New)
ZEN 角ゴシック Newは、2020年にリリースされた日本語のサンセリフフォントです。シンプルなデザインと高い可読性を備え、Webサイトや印刷物など幅広い用途で利用されています。このフォントは、GoogleFontsから入手できます。
主な特徴
- シンプルなデザイン: 余計な装飾がなく、読みやすいフォントです。
- 高い可読性: 小さいサイズでも文字がはっきり見えるように設計されています。
- 豊富なウェイト: 5種類のウェイト(Light、Regular、Medium、Bold、Black)が用意されており、用途に合わせて使い分けることがで- きます。
- OpenTypeフォント: OpenTypeフォントの機能に対応しており、リガチャやスモールキャップなどの機能を利用することができます。
- 無償利用可能: 商用利用を含む無償で利用することができます。
主な用途
- Webサイト
- シンプルで読みやすいデザインなので、Webサイトの本文や見出しなどに最適です。
- 印刷物
- 白黒印刷やカラー印刷にも対応しており、パンフレットや書籍などの印刷物にも利用できます。
- UIデザイン
- ボタンやメニューなどのUI要素にも利用できます。
- ロゴデザイン
- シンプルで洗練されたロゴデザインを作成することができます。
5種類のフォント
- ZenKakuGothicNew-Regular.ttf
- ZenKakuGothicNew-Medium.ttf
- ZenKakuGothicNew-Light.ttf
- ZenKakuGothicNew-Bold.ttf
- ZenKakuGothicNew-Black.ttf
表示例
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
ZEN 角ゴシック New(Zen Kaku Gothic New) | |||
ZenKakuGothicNew-Regular.ttf | 2.25MB | Open Font License. | |
ZenKakuGothicNew-Medium.ttf | 2.22MB | Open Font License. | |
ZenKakuGothicNew-Light.ttf | 2.08MB | Open Font License. | |
ZenKakuGothicNew-Bold.ttf | 2.21MB | Open Font License. | |
ZenKakuGothicNew-Black.ttf | 2.19MB | Open Font License.. |
M PLUSフォント
M PLUSフォントは、日本で開発されたオープンソースのゴシック体フォントファミリーです。以下にその主な特徴を挙げます:
- 多言語対応
- 日本語だけでなく、英語やその他の多言語に対応しています。
- 多様なウェイト
- M PLUSには多くのウェイト(太さ)が用意されており、細いものから太いものまで様々なデザインニーズに応えます。
- 視認性
- 視認性に優れており、ディスプレイや印刷物など様々なメディアで使用されています。
- オープンソース
- SIL Open Font License(OFL)に基づいて配布されており、商用・非商用を問わず自由に使用することができます。
- デザインの自由度
- フォントファミリーには様々なスタイルが含まれており、クリエイティブなデザインの幅が広がります。
- 継続的なアップデート
- コミュニティによって継続的にアップデートされており、新しい文字やスタイルが追加されることがあります。
M PLUS(M+)は、デザインやドキュメント作成において幅広く活用できる信頼性の高いフォントファミリーです。
M PLUS 1
以下の9種類のウエイトが用意されています。
- MPLUS1-Thin.ttf
- MPLUS1-ExtraLight.ttf
- MPLUS1-Light.ttf
- MPLUS1-Regular.ttf
- MPLUS1-Medium.ttf
- MPLUS1-SemiBold.ttf
- MPLUS1-Bold.ttf
- MPLUS1-Black.ttf
- MPLUS1-ExtraBold.ttf
M PLUS 1P
以下の7種類のウエイトが用意されています。
- MPLUS1p-Thin.ttf
- MPLUS1p-Light.ttf
- MPLUS1p-Regular.ttf
- MPLUS1p-Medium.ttf
- MPLUS1p-Bold.ttf
- MPLUS1p-ExtraBold.ttf
- MPLUS1p-Black.ttf
M PLUS 2
以下の9種類のウエイトが用意されています。
- MPLUS2-Thin.ttf
- MPLUS2-ExtraLight.ttf
- MPLUS2-Light.ttf
- MPLUS2-Regular.ttf
- MPLUS2-Medium.ttf
- MPLUS2-SemiBold.ttf
- MPLUS2-Bold.ttf
- MPLUS2-ExtraBold.ttf
- MPLUS2-Black.ttf
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
M PLUS 1 | |||
MPLUS1-Thin.ttf | 1.68MB | Open Font License. | |
MPLUS1-ExtraLight.ttf | 1.69MB | Open Font License. | |
MPLUS1-Light.ttf | 1.69MB | Open Font License. | |
MPLUS1-Regular.ttf | 1.69MB | Open Font License. | |
MPLUS1-Medium.ttf | 1.70MB | Open Font License. | |
MPLUS1-SemiBold.ttf | 1.70MB | Open Font License. | |
MPLUS1-Bold.ttf | 1.70MB | Open Font License. | |
MPLUS1-Black.ttf | 1.69MB | Open Font License. | |
MPLUS1-ExtraBold.ttf | 1.70MB | Open Font License. | |
M PLUS 1P | |||
MPLUS1p-Thin.ttf | 1.69MB | Open Font License. | |
MPLUS1p-Light.ttf | 1.68MB | Open Font License. | |
MPLUS1p-Regular.ttf | 1.67MB | Open Font License. | |
MPLUS1p-Medium.ttf | 1.67MB | Open Font License. | |
MPLUS1p-Bold.ttf | 1.68MB | Open Font License. | |
MPLUS1p-ExtraBold.ttf | 1.69MB | Open Font License. | |
MPLUS1p-Black.ttf | 1.69MB | Open Font License. | |
M PLUS 2 | |||
MPLUS2-Thin.ttf | 1.69MB | Open Font License. | |
MPLUS2-ExtraLight.ttf | 1.70MB | Open Font License. | |
MPLUS2-Light.ttf | 1.70MB | Open Font License. | |
MPLUS2-Regular.ttf | 1.70MB | Open Font License. | |
MPLUS2-Medium.ttf | 1.70MB | Open Font License. | |
MPLUS2-SemiBold.ttf | 1.70MB | Open Font License. | |
MPLUS2-Bold.ttf | 1.70MB | Open Font License. | |
MPLUS2-ExtraBold.ttf | 1.70MB | Open Font License. | |
MPLUS2-Black.ttf | 1.70MB | Open Font License. |
JKゴシック/JK丸ゴシック
JKゴシックフォントとJK丸ゴシックフォントは、どちらも「女子高生が書いたような文字」をイメージして作られた日本語フォントです。それぞれ以下のような特徴があります。
JKゴシックフォント
- 手書き風の丸みを帯びたフォルムで、親しみやすく優しい印象を与えます。
- 線の太さは比較的均一で、読みやすさも確保されています。
- ひらがな・カタカナに独自のデザインが施されており、特に「る」や「き」などの曲線が特徴的です。
- 漢字はオープンソースの「M+フォント」を採用しており、可読性が高いです。
JK丸ゴシックフォント
- JKゴシックフォントをさらに丸く加工したフォントで、より可愛らしい印象を与えます。
- 特に、文字の端や角に丸みが強調されており、柔らかい雰囲気を演出します。
- ひらがな・カタカナのデザインはJKゴシックフォントと共通していますが、丸みを帯びたことでより幼い印象になっています。
- 漢字はM+フォントを採用しており、可読性が高いです。
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
JKゴシックM | JKG-M_3.ttf | 1.78MB | Open Font License. |
JK丸ゴシック | JK-Maru-Gothic-M.ttf | 1.94MB | Open Font License. |
ぼくたちのゴシック
ぼくたちのゴシックフォントは、「ぼくたちのゴシック」、「ぼくたちのゴシック2レギュラー」、「ぼくたちのゴシック2ボールド」の3種類のフォントがあります。ぼくたちのゴシックフォントは、丸みを帯びたフォルムで、親しみやすく優しい印象を与えるゴシック体フォントです。
表示例
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
ぼくたちのゴシック | bokutachi.ttf | 1.93MB | Apache License 2.0 |
ぼくたちのゴシック2レギュラー | Boku2-Regular.ttf | 2.00MB | Apache License 2.0 |
ぼくたちのゴシック2ボールド | Boku2-Bold.ttf | 1.98MB | Apache License 2.0 |
アイシングソーダ
【エモかわいい】の方角を目指したフォントで、インク溜まりの見える、ボールペンでざっと書いた雰囲気を持たせていて、癖のある丸さでかわいさを残しつつも、現代の若さ、青さに宿るエモーショナルを打ち出しています。
一文字ずつ手書きしており、直打ちでも手書き感が出るよう配慮して制作しているとの事です。
漢字は、JIS第1水準漢字、JIS第2水準漢字の一部を収録しています。
尚、このフォントには【 フリー版 / 投げ銭版 / 商用版 】の3種類あります。
また、フォントの太さには、通常と太めの2種類があります。
- アイシングソーダ(通常)
- アイシングソーダ濃(太め)
表示例
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
チェックポイント(リベンジ)
チェックポイント★リベンジフォントは、独特の極太の太さのバランスをもち、文字の線の太さのバランスなどできるだけ統一された少しポップでユニークなフォントです。
漢字は、JIS第一/第二水準6,355字+IBM拡張文字+日本漢字能力検定1級配当漢字(一部を除く)+α 計:約6,900字を収録しています。
フォント情報
ダウンロード先及びライセンスは以下の表を参照ください。
ダウンロード | ファイル名 | サイズ | ライセンス |
---|---|---|---|
チェックポイント(リベンジ) | CP_Revenge.ttf | 2.62MB | ガイドライン |
フォント情報のまとめ
ご紹介したフォントの情報をまとめました。HPからの情報をもとに作成していますが、不十分な情報、間違った情報みあるかと思いますので、正確・詳細な情報はHPをご確認ください。
フォント | ファイル名 | サイズ | 商用利用 | 再配布 | ライセンス | 備考 |
---|---|---|---|---|---|---|
Uemaruフォント | Uemaru-Regular.ttf | 2.79MB | ○ | ○ | Apache 2.0 License | JIS第1・第2水準すべて。さらに記号を追加 |
モトヤLマルベリ3等幅 MotoyaLMaru | MotoyaLMaru.ttf | 2.44MB | ○ | ○ | Apache_License_2.0 | |
Kosugi フォント | Kosugi-Regular.ttf | 2.18MB | ○ | ○ | Open Font License. | |
Kosugi Maruフォント | KosugiMaru-Regular.ttf | 3.40MB | ○ | ○ | Open Font License. | |
さわらびゴシック(Sawarabi Gothic) | SawarabiGothic-Regular.ttf | 1.81MB | ○ | ○ | Open Font License. | JIS第一水準漢字全て、JIS第二水準漢字の約半数を収録 |
さわらび明朝(Sawarabi Mincho) | SawarabiMincho-Regular.ttf | 1.03MB | ○ | ○ | Open Font License. | 仮名、一部の記号類、漢字3481文字を収録 |
ZEN 角ゴシック New(Zen Kaku Gothic New) | ||||||
ZenKakuGothicNew-Regular.ttf | 2.25MB | ○ | ○ | Open Font License. | ||
ZenKakuGothicNew-Medium.ttf | 2.22MB | ○ | ○ | Open Font License. | ||
ZenKakuGothicNew-Light.ttf | 2.08MB | ○ | ○ | Open Font License. | ||
ZenKakuGothicNew-Bold.ttf | 2.21MB | ○ | ○ | Open Font License. | ||
ZenKakuGothicNew-Black.ttf | 2.19MB | ○ | ○ | Open Font License. | ||
M PLUS 1 | Open Font License. | |||||
MPLUS1-Thin.ttf | 1.68MB | ○ | ○ | Open Font License. | ||
MPLUS1-ExtraLight.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS1-Light.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS1-Regular.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS1-Medium.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS1-SemiBold.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS1-Bold.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS1-Black.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS1-ExtraBold.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
M PLUS 1P | ||||||
MPLUS1p-Thin.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS1p-Light.ttf | 1.68MB | ○ | ○ | Open Font License. | ||
MPLUS1p-Regular.ttf | 1.67MB | ○ | ○ | Open Font License. | ||
MPLUS1p-Medium.ttf | 1.67MB | ○ | ○ | Open Font License. | ||
MPLUS1p-Bold.ttf | 1.68MB | ○ | ○ | Open Font License. | ||
MPLUS1p-ExtraBold.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS1p-Black.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
M PLUS 2 | ||||||
MPLUS2-Thin.ttf | 1.69MB | ○ | ○ | Open Font License. | ||
MPLUS2-ExtraLight.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-Light.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-Regular.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-Medium.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-SemiBold.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-Bold.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-ExtraBold.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
MPLUS2-Black.ttf | 1.70MB | ○ | ○ | Open Font License. | ||
JKゴシックM | JKG-M_3.ttf | 1.78MB | ○ | ○ | Open Font License. | |
JK丸ゴシック | JK-Maru-Gothic-M.ttf | 1.94MB | ○ | ○ | Open Font License. | |
ぼくたちのゴシック | bokutachi.ttf | 1.93MB | ○ | ○ | Apache License 2.0 | |
ぼくたちのゴシック2レギュラー | Boku2-Regular.ttf | 2.00MB | ○ | ○ | Apache License 2.0 | |
ぼくたちのゴシック2ボールド | Boku2-Bold.ttf | 1.98MB | ○ | ○ | Apache License 2.0 | |
マキナス 4 Flat | Makinas-4-Flat.ttf | 1.77MB | ○ | × | https://moji-waku.com/mj_work_license/ | AdobeJapan 1-3(9,354字) |
マキナス 4 Square | Makinas-4-Square.ttf | 1.74MB | ○ | × | https://moji-waku.com/mj_work_license/ | AdobeJapan 1-3(9,354字) |
アイシングソーダ | ||||||
Icing soda2.ttf | 1.36MB | × | https://berrymilksugar.com/font-tos/ | 収録文字はひらがな、カタカナ、英数字、各種記号、JIS第1水準漢字、JIS第2水準漢字の一部。 合計 3775文字 | ||
Icing soda2_濃.ttf | 1.36MB | × | https://berrymilksugar.com/font-tos/ | 収録文字はひらがな、カタカナ、英数字、各種記号、JIS第1水準漢字、JIS第2水準漢字の一部。 合計 3775文字 | ||
チェックポイント(リベンジ) | CP_Revenge.ttf | 2.62MB | 〇 | 収録文字は、ひらがな、カタカナ、アルファベット、JIS第一/第二水準6,355字+IBM拡張文字など含む7,000字が収録されています。 |
OTF TTF 変換
上記で、紹介したフォントの中にはOTF(OpenTypeフォント)で公開されているフォントもあります。
OpenTypeフォントはマイクロソフトとアドビシステムズが共同で開発したフォントフォーマットです。
以下のWEBアプリで、TTFフォントに変換する事ができます。
OTFフォントを参考URL
以下、OTFフォントの参考URLです。
OpenFontRenderライブラリ
OpenFontRenderライブラリは、M5StackやESP32などのマイコンで、TTFフォントを簡単に表示できるライブラリです。FreeTypeライブラリを使用して、レンダリングを行っています。
従来、マイコンでTTFフォントを表示するには、フォントファイルを独自の形式に変換する必要がありました。しかし、OpenFontRenderライブラリを使用すれば、フォントファイルをそのまま使用することができます。TTFフォントなので、1つのフォントファイルで複数のフォントサイズでの表示が可能です。
以下に、OpenFontRenderライブラリの概要と基本的な使用方法を説明します。
使用方法
このライブラリは、以下の方法でTTFフォントを表示することができます。
- SDカードからフォントを読み込む
- SPIFFSからフォントを読み込む
- プログラム内にフォントを埋め込む
描画速度は、 3 > 1 > 2 で、プログラムに組み込めるサイズであれば、プログラムに組み込んで使用する場合が最も速く描画できます。SPIFFSが最も遅く、実使用は難しいのではといったレベルです。
プログラムに組み込んで使用する場合、フラッシュメモリが16MB以上のESP32を選択してください。
尚、フォントサイズが大きくて、プログラムに組み込めない場合は、SDカードを使用をお勧めします。
主な機能
以下、ライブラリの主な機能です。
- TrueTypeフォントのサポート
- TTFファイルを直接読み込み、描画できます。
- 高品質なレンダリング
- アンチエイリアス処理により、滑らかなテキスト表示が可能です。
- 日本語を含む多言語サポート
- UTF-8エンコードのテキストをレンダリングできます。
利点
以下、ライブラリの利点です。
- フォントファイルをそのまま使用できる
- メモリ容量が少ないマイコンでも使用できる
- フォントの表示を簡単に行うことができる
- 独自のフォント形式を追加できる
注意点
OpenFontRenderライブラリを使用する際の注意点は以下の通りです。
- 使用するフォントによっては、M5Stack, ESP32 のメモリ容量によっては使用できない場合があります。
- 圧縮したフォントファイルをプログラム内に埋め込む場合は、プログラムサイズが大きくなります。
OpenFontRenderライブラリのSample
OpenFontRenderライブラリは、PlatformIOのLibrariesからはインストールできませんので、ここからダウンロードしてPlatformIOで作成したプロジェクト内のLIBフォルダの下に解凍したファイルをコピーします。
「プロジェクト名\lib\OpenFontRender-master\examples\」に、OpenFontRenderライブラリのSampleコードが入っています。
examplesフォルダ
examplesフォルダには、”M5Stack”、”TFT_eSPI”、”WioTerminal”の3つのフォルダがあります。
フォルダ | 説明 |
---|---|
M5Stack | M5Stack用のサンプル |
TFT_eSPI | グラフィックライブラリ「TFT_eSPI」を使用したサンプル |
WioTerminal | WioTerminal用のサンプル |
M5Stackフォルダ
M5Stackフォルダには、以下の6個のサンプルがあります。
フォルダ | 説明 |
---|---|
alignment_string | 文字の表示位置の違いを説明するサンプル |
load_from_binary | ソースに組み込んで使用するサンプル |
load_from_sd | SDカードからフォントを読み込んで使用するサンプル |
load_from_sd_without_preset | プリセットなしえ、SDカードからフォントを読み込んで使用するサンプル |
load_from_spiffs | SPIFFSからフォントファイルを読み込んで使用するサンプル |
use_LovyanGFX | グラフィックライブラリの「LovyanGFX」で使用するサンプル |
サンプルコード
以下は、”M5Stackフォルダ”内の”load_from_binary”、”load_from_sd”、”load_from_spiffs”の3個のサンプルを条件コンパイルできるようにしたサンプルコードです。
#include <Arduino.h>
#include <M5Unified.h>
// #define USE_binaryttf_h
#define USE_SPIFFS
#ifdef USE_binaryttf_h
#include "Uemaru-Regular.h"
// #include "MotoyaLMaru.h"
// #include "Kosugi-Regular.h"
// #include "KosugiMaru-Regular.h"
// #include "SawarabiGothic-Regular.h"
// #include "SawarabiMincho-Regular.h"
#include "OpenFontRender.h" // Include after M5Unified.h
#else
#include <SD.h>
#include "OpenFontRender.h" // Include after M5Unified.h
#ifdef USE_SPIFFS
#include "ofrfs/M5Stack_SPIFFS_Preset.h" // Use preset
#else
#include "ofrfs/M5Stack_SD_Preset.h" // Use preset
#endif
#endif
OpenFontRender render;
void setup()
{
// put your setup code here, to run once:
auto cfg = M5.config();
M5.begin(cfg);
M5.Display.fillScreen(TFT_BLACK);
#ifdef USE_binaryttf_h
render.setSerial(Serial); // Need to print render library message
render.showFreeTypeVersion(); // print FreeType version
render.showCredit(); // print FTL credit
if (render.loadFont(binaryttf, sizeof(binaryttf)))
{
Serial.println("Render initialize error");
return;
}
#else
#ifdef USE_SPIFFS
SPIFFS.begin();
render.setSerial(Serial); // Need to print render library message
render.showFreeTypeVersion(); // print FreeType version
render.showCredit(); // print FTL credit
if (render.loadFont("/SawarabiMincho-Regular.ttf"))
// if (render.loadFont("/Uemaru-Regular.ttf"))
{
Serial.println("Render initialize error");
return;
}
#else
SD.begin(GPIO_NUM_4, SPI, 40000000);
render.setSerial(Serial); // Need to print render library message
render.showFreeTypeVersion(); // print FreeType version
render.showCredit(); // print FTL credit
// if (render.loadFont("/ttf/JKG-M_3.ttf"))
if (render.loadFont("/ttf/Uemaru-Regular.ttf"))
{
Serial.println("Render initialize error");
return;
}
#endif
#endif
render.setDrawer(M5.Display); // Set drawer object
unsigned long t_start = millis();
render.setFontColor(TFT_WHITE);
render.printf("Hello World\n");
render.seekCursor(0, 10);
render.setFontSize(30);
render.setFontColor(TFT_GREEN);
render.printf("完全なUnicodeサポート\n");
render.seekCursor(0, 10);
render.setFontSize(40);
render.setFontColor(TFT_ORANGE);
render.printf("こんにちは世界\n");
unsigned long t_end = millis();
Serial.printf("Time: %ld ms\n", t_end - t_start);
}
char fn[100];
void loop()
{
// put your main code here, to run repeatedly:
M5.delay(1);
M5.update();
}
- 実行後の画面表示
プログラムに組み込む
TTFフォントをプログラムに組み込むには、 ttf2bin.py を使用して使用したいTTFフォントを binary TTF font file に変換する必要があります。 ttf2bin.py をpythonが必要です。
#define定義は、以下のように設定します。
#define USE_binaryttf_h
// #define USE_SPIFFS
ttf2bin.py を使用してTTFフォントファイルをヘッダファイルに変換する
コマンドプロンプトで、ttf2bin.py にTTFフォントファイルのファイル名を引数として渡して実行すると、binaryttf.h というヘッダファイルに変換されます。適当な名前に変換して、ソースコードにインクルードして使用します。
ttf2bin.py TTFファイル名.ttf
ソースファイルにインクルードする
OpenFontRender.h、とともにインクルードします。以下では、名前を変更した”Uemaru-Regular.h“をインクルードしています。
OpenFontRender 用の変数を定義します。(OpenFontRender render;)
#include "Uemaru-Regular.h"
#include "OpenFontRender.h" // Include after M5Unified.h
OpenFontRender render;
フォントをロードする
render.loadFontで、フォントをメモリにロードします。
if (render.loadFont(binaryttf, sizeof(binaryttf)))
{
Serial.println("Render initialize error");
return;
}
日本語の表示
render.printfで、日本語を表示できます。
render.setFontColorで、色の指定、render.setFontSizeで、フォントサイズを指定できます。
render.setFontColor(TFT_WHITE);
render.printf("Hello World\n");
render.seekCursor(0, 10);
render.setFontSize(30);
render.setFontColor(TFT_GREEN);
render.printf("完全なUnicodeサポート\n");
render.seekCursor(0, 10);
render.setFontSize(40);
render.setFontColor(TFT_ORANGE);
render.printf("こんにちは世界\n");
SDカードからフォントファイルを読み出す
SDカードに使用するTTFフォントファイルをコピーし、そのフォントファイルを読み出し、使用します。
#define定義は、以下のように設定します。
// #define USE_binaryttf_h
// #define USE_SPIFFS
ヘッダファイルのインクルード
#include <SD.h>
#include "OpenFontRender.h" // Include after M5Unified.h
#include "ofrfs/M5Stack_SD_Preset.h" // Use preset
OpenFontRender の変数定義
OpenFontRender の変数を定義します。
OpenFontRender render;
フォントをロードする
render.loadFontで、SDカードからフォントファイルをロードします。以下のコードでは、ttfフォルダ内にある、フォントファイル”Uemaru-Regular.ttf”を読み出しています。
if (render.loadFont("/ttf/Uemaru-Regular.ttf"))
{
Serial.println("Render initialize error");
return;
}
日本語の表示
文字の表示部分は、上述のした内容となっていて、共通コードとなっています。」
SPIFFSからフォントファイルを読み出す
SPIFFSのルートフォルダにコピーしたTTFフォントファイルを読み出し、使用します。
SPIFFSへのフォントデータの書込
プロジェクトに「data」フォルダを追加し、この中に使用したいフォントファイルをコピーします。SPIFFSみは大きなサイズのフォントファイルは入りませんので注意してください。
PlayformIOのメニューの「Upload Filesystem image」で書き込みます。
#define定義
#define定義は、以下のように設定します。
// #define USE_binaryttf_h
#define USE_SPIFFS
ヘッダファイルのインクルード
#include <SD.h>
#include "OpenFontRender.h" // Include after M5Unified.h
#include "ofrfs/M5Stack_SPIFFS_Preset.h" // Use preset
OpenFontRender の変数定義
OpenFontRender の変数を定義します。
OpenFontRender render;
フォントをロードする
render.loadFontで、SDカードからフォントファイルをロードします。以下のコードでは、ttfフォルダ内にある、フォントファイル”Uemaru-Regular.ttf”を読み出しています。
if (render.loadFont("/ttf/Uemaru-Regular.ttf"))
{
Serial.println("Render initialize error");
return;
}
日本語の表示
文字の表示部分は、上述のした内容となっていて、共通コードとなっています。」
TTFフォントを変換したヘッダファイルのサンプル
srcフォルダには、以下のフォントをttf2bin.py を使用してヘッダファイルに変換したファイルがあります。それぞれ、以下のライセンスとなっています。
フォント | ヘッダファイル | ライセンス | ライセンスファル |
---|---|---|---|
Uemaruフォント | Uemaru-Regular.h | Apache License 2.0 | LICENSE.txt |
モトヤLマルベリ3等幅 MotoyaLMaru | MotoyaLMaru.h | Apache License 2.0 | LICENSE.txt |
Kosugi フォント | Kosugi-Regular.h | Apache License 2.0 | LICENSE.txt |
Kosugi Maruフォント | KosugiMaru-Regular.h | Apache License 2.0 | LICENSE.txt |
さわらび明朝(Sawarabi Mincho) | SawarabiMincho-Regular.h | Open Font License. | OFL.txt |
さわらびゴシック(Sawarabi Gothic) | SawarabiGothic-Regular.h | Open Font License. | OFL.txt |
プロジェクトのソースコード
ここで紹介したプロジェクトのソースコードは、以下のリンクからダウンロードできます。また、上記で紹介したTTFフォントもいくつか含まれています。ライセンスについては、この記事および解凍後のファイルをご確認ください。
参考URL
以下、参考URLです。