Übersicht
Schriftarten auf einem eingebetteten Gerät funktionieren etwas anders als Schriftarten auf deinem Computer. Dieser Leitfaden erklärt, warum das so ist, und führt dich durch die Erstellung von Schriftarten in PicoPixel – von der Auswahl einer mitgelieferten Schriftart oder dem Hochladen einer eigenen, über den Umgang mit Rechts-nach-links-Sprachen wie Arabisch und Hebräisch, bis hin zum Umgang mit den sehr großen Schriftarten für Chinesisch, Japanisch und Koreanisch. Abschließend behandeln wir eine praktische Bereinigungsfunktion für den Fall, dass du viel experimentiert hast.
Warum müssen Schriftarten konvertiert werden?
Auf deinem Laptop beschreibt eine Schriftartdatei (wie eine .ttf oder .otf) jeden Buchstaben als eine Reihe mathematischer Kurven. Dein Computer hat genug Leistung und Arbeitsspeicher, um diese Kurven in jeder gewünschten Größe flüssig darzustellen.
Ein kleines Gerät (ein ESP32, ein Smartwatch-Chip, ein winziger Display-Controller) kann das in der Regel nicht. Es fehlt der Arbeitsspeicher und die Rechenleistung, um Kurven spontan neu zu zeichnen. Daher verfolgt LVGL einen anderen Ansatz: Anstatt Kurven zu speichern, wird jeder Buchstabe als winziges vorgezeichnetes Bild (ein Bitmap) in einer festen Größe gespeichert. Das ist für das Gerät viel leichter zu verarbeiten.
PicoPixel übernimmt diese Konvertierung für dich. Wenn du eine Schriftart erstellst, nehmen wir die ursprüngliche Schriftartdatei und wandeln sie in das Bitmap-Format um, das LVGL benötigt – dabei werden nur die gewünschten Buchstaben in den gewünschten Größen herausgepickt.
Da jeder Buchstabe in einer festen Größe vorgezeichnet ist, ist eine konvertierte LVGL-Schriftart auf die gewählte Größe festgelegt. Eine 16px-Schriftart kann nicht auf 32px gestreckt werden und dabei noch scharf aussehen. Wenn du Text in zwei verschiedenen Größen benötigst, erstellst du die Schriftart in beiden Größen (siehe Schriftart erstellen weiter unten, wo du mehrere Größen auf einmal auswählen kannst).
Das ist auch der Grund, warum Schriftarten auf einem Gerät echte Kosten verursachen: Jeder Buchstabe, in jeder Größe, beansprucht ein wenig Speicherplatz. Der Großteil dieses Leitfadens dreht sich darum, diese Kosten gering zu halten – indem nur die Zeichen und Größen einbezogen werden, die tatsächlich verwendet werden.
Mitgelieferte Schriftarten und eigene Schriftarten
Wenn du eine Schriftart erstellst, hast du zwei Ausgangspunkte:
- Mitgeliefert – eine kuratierte Auswahl beliebter, gut getesteter Schriftarten, die sofort einsatzbereit sind: Noto Sans, Roboto, Open Sans, Montserrat, Poppins, Inter, Lato, Nunito, Source Sans 3 und mehr. Diese sind eine sichere Wahl und ein guter Standard.
- Hochladen – bring deine eigene
.ttf- oder.otf-Datei mit. Nutze diese Option, wenn du eine spezifische Marken-Schriftart hast oder eine Schriftart, die eine Sprache abdeckt, die die mitgelieferten nicht enthalten.
Wenn du deine eigene Schriftart hochlädst, verwende eine statische Schriftartdatei (zum Beispiel Roboto-Regular.ttf) anstatt einer „variablen" Schriftartdatei (wie Roboto-VariableFont.ttf). Statische Dateien werden wesentlich zuverlässiger konvertiert. Einfache .ttf-Dateien funktionieren generell am besten.
Egal welche du wählst, es gibt eine Live-Vorschau, mit der du deinen eigenen Text eingeben und genau sehen kannst, wie er aussehen wird, bevor du die Schriftart erstellst.
Eine Schriftart erstellen
Öffne das Schriftart erstellen-Panel und du siehst ein kurzes Formular. Hier erfährst du, was jeder Teil bewirkt:
- Schriftart auswählen – wähle eine mitgelieferte Schriftart (und deren Gewicht, z. B. Regular oder Bold) oder wechsle zum Upload-Tab und wähle deine eigene Datei.
- Schriftartname – der Name, den du in der Schriftartliste deines Projekts siehst. Gib ihm einen einprägsamen Namen, besonders wenn du mehrere haben wirst.
- Größe (px) – die Pixelgröße der Schriftart. Du kannst mehr als eine Größe auf einmal auswählen (praktische Voreinstellungen wie 16, 22 und 32 sind nur einen Tipp entfernt). Denke daran, dass jede Größe separat generiert wird, also wähle nur die aus, die du wirklich verwenden wirst.
- Buchstaben – wähle, welche Zeichensätze einbezogen werden sollen: Standard (grundlegendes Englisch), Lateinisch, Griechisch, Kyrillisch, Hebräisch, Arabisch, Thailändisch und einige weitere. So teilst du PicoPixel mit, welche Buchstaben der Sprache du benötigst.
- Asiatisch – eine separate Option für Chinesisch, Japanisch und Koreanisch. Diese benötigen besondere Behandlung, die in einem eigenen Abschnitt weiter unten behandelt wird.
Es gibt auch einen Erweitert-Bereich zur Feinabstimmung, einschließlich Bits per Pixel (wie viele Graustufen jeder Buchstabe verwendet – mehr sieht weicher aus, benötigt aber mehr Speicherplatz; 4 ist ein guter Standard) und Felder zur Angabe genauer Zeichenbereiche oder Symbole von Hand. Die meisten Benutzer müssen diese nie anfassen.
Nicht jede Schriftart enthält jede Sprache. Wenn du ein nicht-lateinisches Skript auswählst und deine Vorschau leere Kästchen anstatt Buchstaben anzeigt, unterstützt diese Schriftart es nicht – wechsle zu einer mitgelieferten Schriftart, die für dieses Skript entwickelt wurde, oder lade eine hoch, die es unterstützt. PicoPixel warnt dich, wenn du ein Skript auswählst, das nicht alle Schriftarten unterstützen.
Rechts-nach-links-Schriften: Arabisch & Hebräisch
Sprachen wie Arabisch und Hebräisch werden von rechts nach links gelesen, und ihre Buchstaben erfordern besondere Behandlung. Die gute Nachricht ist, dass du das direkt im Create Font-Panel einrichtest – du musst nichts manuell konfigurieren.
- Wähle im Buchstaben-Dropdown Arabisch oder Hebräisch. Das ist der wichtige Schritt: Er teilt PicoPixel mit, den richtigen Zeichensatz für dieses Skript einzubeziehen (die grundlegenden englischen Buchstaben werden ebenfalls mitgeliefert, sodass Zahlen und lateinischer Text weiterhin funktionieren).
- PicoPixel schlägt eine Schriftart vor, die für dieses Skript entwickelt wurde, zum Beispiel Noto Sans Arabic. Verwende den Vorschlag (oder eine andere skriptbewusste Schriftart) anstatt einer einfachen lateinischen Schriftart, die die Buchstaben nicht enthält.
- Überprüfe die Live-Vorschau. Wenn die Buchstaben dort korrekt dargestellt werden, bist du gut aufgestellt. Wenn du Kästchen siehst, unterstützt die gewählte Schriftart das Skript nicht – wähle eine andere.
Arabische Buchstaben ändern ihre Form je nach Position in einem Wort, und die gesamte Zeile fließt von rechts nach links. Wenn du dein Projekt exportierst, erkennt PicoPixel automatisch, dass du arabischen, persischen oder hebräischen Text verwendet hast, und aktiviert die entsprechende LVGL-Einstellung für verbundene Buchstabenformen – sodass du nicht durch Konfigurationsdateien wühlen musst, um es auf dem Gerät richtig aussehen zu lassen.
Das Wichtigste ist: Die Auswahl von Arabisch oder Hebräisch im Buchstaben-Dropdown beim Erstellen der Schriftart ist das, was diese Zeichen einschließt. Wenn du zuerst eine einfache Schriftart erstellst und erst später Rechts-nach-links-Text hinzufügst, werden die Buchstaben nicht vorhanden sein – erstelle die Schriftart von Anfang an mit dem richtigen Skript ausgewählt.
Chinesisch, Japanisch & Koreanisch
CJK ist die gängige Abkürzung für Chinesisch, Japanisch und Koreanisch. Diese Sprachen sind besonders, weil sie sehr viele Zeichen haben – Koreanisch hat rund 11.000 und Chinesisch weit über 20.000. Denke daran, dass jedes Zeichen vorgezeichnet und auf dem Gerät gespeichert wird. Das Einbeziehen einer vollständigen CJK-Schriftart könnte Megabytes hinzufügen, die auf den meisten eingebetteten Geräten schlicht nicht passen.
Die Lösung besteht darin, nur die Zeichen einzubeziehen, die du tatsächlich verwendest. Eine typische Oberfläche zeigt möglicherweise nur etwa hundert verschiedene Zeichen an – und das ist im Vergleich winzig.
So gehst du vor:
- Wähle im Asiatisch-Dropdown Koreanisch, Chinesisch oder Japanisch.
- Suche das Symbole-Feld (im Erweitert-Bereich) und füge den tatsächlichen Text ein, den deine Oberfläche anzeigen wird – jedes Label, jede Schaltfläche und jede Nachricht. PicoPixel fügt nur für jedes dort gefundene Zeichen ein Glyph hinzu.
- Um dir den Einstieg zu erleichtern, füllt PicoPixel dieses Feld vorab mit gängigen Oberflächen-Wörtern (wie „Einstellungen", „Bestätigen", „Abbrechen" usw.) in der gewählten Sprache. Füge deinen eigenen Text hinzu.
Auf diese Weise endet eine Schriftart, die hätte mehrere Megabytes groß sein können, bei einigen Hundert Kilobytes.
Nur die Zeichen, die du in Symbole auflistest, werden einbezogen. Wenn deine Oberfläche später ein Zeichen anzeigt, das du nicht hinzugefügt hast, erscheint es als leeres Kästchen. Wenn sich dein Text ändert, komm zurück und aktualisiere das Symbole-Feld, dann erstelle die Schriftart neu.
Für CJK gibt dir das Hochladen der spezifischen gewünschten Schriftart (anstatt sich auf eine allgemeine zu verlassen) die meiste Kontrolle – und das Einfügen einer vollständigen, finalen Kopie deines Oberflächen-Textes stellt sicher, dass nichts ausgelassen wird.
Bereinigung: Ungenutzte Schriftarten löschen
Schriftarten nehmen Speicherplatz ein, und es ist leicht, Schriftarten anzusammeln, die du nicht mehr benötigst – besonders beim Experimentieren. Zum Beispiel bist du dir vielleicht nicht sicher, ob 16px oder 22px besser aussieht, also erstellst du beide und probierst sie aus. Sobald du dich entschieden hast, ist die andere nur unnötiger Ballast.
PicoPixel macht das schmerzlos. Im Schriftarten-Bereich deiner Assets gibt es einen Ungenutzte Schriftarten löschen-Button. Er scannt jedes Widget in deinem Projekt, findet die Schriftarten, die tatsächlich nichts verwendet, und entfernt sie mit einem Klick – sodass du die Überreste beseitigen und Platz für die Schriftarten freimachen kannst, die du wirklich benötigst.
Das ist der einfache Weg, mit Größen zu experimentieren. Erstelle ein paar Größen, sieh welche auf deinem Design am besten aussieht, und klicke dann auf Ungenutzte Schriftarten löschen, um den Rest aufzuräumen. Jede Schriftart in der Liste zeigt ihre Größen- und Qualitätseinstellungen, sodass du auf einen Blick sehen kannst, was du hast.
„Ungenutzte Schriftarten löschen" entfernt nur Schriftarten, auf die kein Widget verweist, sodass sich dein Design nicht ändert. Du kannst eine einzelne Schriftart auch selbst löschen, indem du mit der rechten Maustaste darauf in der Liste klickst. Wenn du versehentlich etwas entfernst, macht Rückgängig es sofort wieder rückgängig.
