Schriftarten-Beispiel

Enthalten

• 480 x 480 mehrsprachiger Typografie-Screen, als kompakte Font-Testfläche gestaltet.
• Neun sichtbare Textbeispiele, für Kyrillisch, Chinesisch, Japanisch, Griechisch, Arabisch, Koreanisch, Hebräisch, Thai und Bengalisch.
• Skriptspezifische Label-Ebenen, im Ebenen-Panel benannt, damit leicht sichtbar ist, welches Textobjekt zu welcher Sprache gehört.
• Zehn konvertierte Font-Assets, die zeigen, dass ein echtes LVGL-Projekt mehrere Fontfamilien und Größen benötigen kann.
• Keine Bildabhängigkeit, sodass das Projekt auf Text-Rendering statt Bitmap-Screenshots fokussiert bleibt.
• Gemischte Schriftgrößen, einschließlich kleiner Body-Labels und größerer Display-Texte.
• Gemischte Farben, damit jedes Schriftsystem auf dem dunklen Hintergrund leicht geprüft werden kann.
• Font-Hinweise direkt auf dem Canvas, die die zwei großen Regeln nennen: eine Schrift wählen, die Ihre Zielsprache unterstützt, und die Zeichen einschließen, die Ihre UI tatsächlich nutzt.
• Beispiel für das Create-Font-Panel, mit gebündelten Schriften, Uploads, Fontgrößen-Presets, Letters, Asian und erweiterten Optionen.

Asset-Überblick

Das Assets-Panel zeigt dies als fontfokussierte PicoPixel-Vorlage:

• Bilder: 0, die Vorschau besteht aus editierbaren Textobjekten.
• Farben: 0, Farben sind direkt auf die Labels im Design angewendet.
• Schriften: 10, genug um mehrere Schriftsysteme, Größen und Fontfamilien zu demonstrieren.
• Widgets: 0, damit das Beispiel auf Text- und Font-Assets fokussiert bleibt.

Sichtbare Font-Assets sind:

• Gothic A1 48
• M PLUS 1p 60
• Noto Sans Arabic 32
• Noto Sans Bengali 32
• Noto Sans Cyrillic 48
• Noto Sans SC 32
• Noto Sans Thai Bold 32
• Open Sans Greek 48
• Open Sans Hebrew 48

Die Liste im Screenshot ist scrollbar, daher enthält das Projekt noch ein weiteres Font-Asset über die sichtbaren Zeilen hinaus. Das wichtige Muster ist, dass jedes Schriftsystem eine Schrift verwendet, die die benötigten Glyphen wirklich enthält.

Ebenenstruktur

Das Ebenen-Panel ist wie eine Sprach-Checkliste aufgebaut. Unter Screen 1 ist jedes Label nach dem Skript oder der Sprache benannt, die es demonstriert:

• Cyrillic - RU
• Chinese
• Japanese
• Greek
• Arabic
• Korean
• Hebrew
• Thai-na
• Bengali

Diese Struktur macht die Datei als Referenz nützlich. Wenn eine Sprache korrekt gerendert wird, können Sie Label, Font-Asset, Größe, Farbe und Textwert prüfen und denselben Ansatz in Ihr eigenes PicoPixel-Projekt übernehmen.

CJK-Schriften und fehlende Glyphen

Chinesische, japanische und koreanische Schriften brauchen in LVGL besondere Sorgfalt, weil die vollständigen Zeichensätze enorm groß sind. Alle möglichen Glyphen einzuschließen, kann einem eingebetteten Projekt mehrere Megabyte hinzufügen, was für kleine Geräte meist zu viel ist.

Für CJK-Text verwenden Sie die Option Asian im Create-Font-Panel von PicoPixel und fügen anschließend die exakten Zeichen, die Ihre Oberfläche anzeigen wird, in das Feld Symbols ein. Schließen Sie jedes Label, jeden Button, jeden Menüpunkt, jede Warnmeldung, Einheit und Statuszeichenfolge ein, die auf dem Screen erscheinen kann.

Die detaillierte Anleitung steht in Working with fonts, besonders im Abschnitt zu Chinesisch, Japanisch und Koreanisch.

Schriften für jedes Schriftsystem auswählen

Nicht jede Schrift unterstützt jede Sprache. Eine lateinische Schrift kann für Englisch perfekt aussehen, aber keine arabischen, hebräischen, thailändischen, koreanischen, japanischen oder chinesischen Glyphen enthalten. Die Vorlage zeigt den sichereren Ansatz: Verwenden Sie Fontfamilien, die für das jeweilige Schriftsystem entwickelt wurden.

• Verwenden Sie Noto Sans SC oder eine andere CJK-fähige Schrift für vereinfachtes Chinesisch.
• Verwenden Sie eine japanischfähige Schrift für japanischen Text.
• Verwenden Sie eine koreanischfähige Schrift wie Gothic A1 oder eine andere Hangul-Schrift für koreanischen Text.
• Verwenden Sie Noto Sans Arabic für arabische Schrift.
• Verwenden Sie Open Sans Hebrew oder eine andere hebräischfähige Schrift für Hebräisch.
• Verwenden Sie eine griechischfähige Schrift für Griechisch.
• Verwenden Sie eine kyrillischfähige Schrift für Russisch und andere kyrillische Texte.
• Verwenden Sie Thai- und Bengalisch-fähige Schriften für Thai- und Bengalisch-Labels.

Im Create-Font-Panel steuert das Dropdown Letters die Abdeckung für nicht-CJK-Skripte wie Griechisch, Kyrillisch, Hebräisch, Arabisch, Thai und mehr. Das Dropdown Asian ist getrennt, weil CJK-Glyphensätze viel größer sind.

Warum das gut für LVGL funktioniert

Diese Vorlage ist nützlich, weil sie dazu passt, wie LVGL Schriften auf eingebetteter Hardware wirklich behandelt.

• LVGL-Schriften sind konvertierte Bitmap-Assets, daher wird jede ausgewählte Größe separat generiert.
• Nur ausgewählte Glyphen werden aufgenommen, wodurch die Firmware-Größe kontrollierbar bleibt.
• Skriptspezifische Schriften reduzieren fehlende Glyphen, besonders bei nicht-lateinischen Sprachen.
• Mehrere Größen können nebeneinander existieren, sodass Überschriften, Body-Labels und kleine Beschriftungen jeweils ein passendes Font-Asset verwenden können.
• Die Labels bleiben editierbar, sodass Sie Beispieltext vor dem Export durch Ihre eigenen Übersetzungen ersetzen können.
• Das Projekt exportiert als standardmäßiger LVGL-8.x-UI-Code, einschließlich der Font-Assets, die von den Labels benötigt werden.

Laufzeitmuster

Nach dem Export können Ihre Labels weiterhin aus der Firmware aktualisiert werden. Die exakten generierten Symbolnamen hängen von Ihren PicoPixel-Objektnamen und Fontnamen ab, aber das LVGL-Muster ist vertraut:

lv_label_set_text(ui_status_label, "Settings");
lv_obj_set_style_text_font(ui_status_label, &ui_font_noto_sans_32, 0);

Achten Sie bei übersetztem Text darauf, dass die exportierte Schrift jedes Zeichen enthält, das Sie an lv_label_set_text übergeben könnten. Das ist besonders wichtig für CJK-Zeichenfolgen und für dynamische Statusmeldungen, die auf dem initialen Design-Canvas nicht sichtbar sind.

Anpassungsideen

Verwenden Sie dies als kostenlose LVGL-Typografievorlage und passen Sie sie anschließend an Ihr eigenes Produkt an.

• Ersetzen Sie die Beispielbegrüßungen durch Ihre echten übersetzten UI-Labels.
• Erstellen Sie eine Schrift pro Schriftsystem und Größe, die Ihre Oberfläche tatsächlich benötigt.
• Reduzieren Sie ungenutzte Schriftgrößen vor dem Export, damit die Firmware kleiner bleibt.
• Nutzen Sie dasselbe Textlayout, um mehrere Fontfamilien zu vergleichen, bevor Sie sich entscheiden.
• Fügen Sie Rechts-nach-links-Labels für Arabisch, Persisch, Hebräisch oder andere RTL-Oberflächen hinzu.
• Erstellen Sie separate übersetzte Screens für Sprachauswahl, Einstellungen, Onboarding oder Warnungen.
• Verwenden Sie Delete Unused Fonts nach Experimenten, sodass nur referenzierte Font-Assets übrig bleiben.

Export in Ihr Projekt

Öffnen Sie die Vorlage in PicoPixel, prüfen Sie die Font-Assets, ersetzen Sie die Beispiel-Labels durch Ihren eigenen Text und erstellen Sie vor dem Export alle fehlenden Schriften. Wenn Sie mit Chinesisch, Japanisch oder Koreanisch arbeiten, fügen Sie die exakten UI-Zeichenfolgen beim Erstellen der Schrift in das Symbols-Feld ein.

Für ESP32-Projekte ist der übliche Ablauf:

1. Wählen Sie die Sprachen, die Ihre UI unterstützen muss.
2. Erstellen Sie kompatible LVGL-Schriften für jedes Schriftsystem und jede Größe.
3. Schließen Sie für Chinesisch, Japanisch und Koreanisch die exakten Zeichen ein, die Ihre UI anzeigen wird.
4. Ersetzen Sie die Beispiel-Labels in dieser Vorlage durch Ihren echten UI-Text.
5. Exportieren Sie die PicoPixel-UI als LVGL C.
6. Fügen Sie die exportierte UI und die Fontdateien Ihrem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
7. Rufen Sie ui_init() auf, nachdem LVGL und Ihr Display-Treiber bereit sind.

Den schrittweisen Font-Ablauf finden Sie in Working with fonts. Für Import und Öffnen von Vorlagen siehe How to use PicoPixel templates.

Beste Einsatzfälle

Diese Vorlage passt gut, wenn Sie einen klaren Ausgangspunkt brauchen für:

• Mehrsprachige LVGL-Textbeispiele
• CJK-Font-Setup für Chinesisch, Japanisch oder Koreanisch
• ESP32-Prototypen mit übersetzter UI
• Tests für Font-Konvertierung
• Debugging fehlender Glyphen
• Prüfungen für Rechts-nach-links- und nicht-lateinische Schriften
• Internationale Einstellungsseiten
• Kiosk-, Wearable-, Dashboard- und Smart-Device-Interfaces