PixelFonts: Pixel-perfecte lettertypen voor de kleinste displays

Daarnaast kan AI worden gebruikt om de lettertypen op te schalen, spaties tussen pixels toe te voegen, pixels groter te maken of af te ronden. Dit maakt het een uitstekende methode om een 'faux-low-res' display of een retro arcade-stijl te creëren.

Taalondersteuning

De volgende talen worden ondersteund: Engels, Spaans, Frans, Italiaans, Tsjechisch en meer.

  • Opmerking 1: Gekleurde tekens (accenten) zijn alleen beschikbaar voor kleine letters; hoofdletters met accenten zijn niet inbegrepen, omdat dit aanpassingen van de letters zou vereisen.
  • Opmerking 2: De Tsjechische speciale tekens zijn handmatig ontworpen. Andere uitgebreide Latijnse glyphs zijn door AI gegenereerd; pull requests (PR's) met correcties van native speakers zijn daarom welkom.

Gebruik

AdafruitGFX

Voor elk lettertype zijn er twee opties: een Engelse versie, die werkt met de standaard AdafruitGFX-bibliotheek, en een 'Extended Latin'-versie, waarvoor een UTF-8 fork van AdafruitGFX is vereist.

Het gebruik van de Extended Latin-versie met de standaardbibliotheek werkt nog steeds voor Engelse tekens, maar verbruikt door de extra data meer geheugen. Daarom wordt aangeraden de Engelse versie te gebruiken in combinatie met de standaardbibliotheek.

#include <Adafruit_GFX.h>
#include <PixelFonts.h>   // Laadt alle lettertypen; ongebruikte varianten nemen geen flash-geheugen in beslag

// Dit is vereist om Extended Latin te laten werken (gebruik de geforkte Adafruit-GFX):
// https://github.com/DoomHammer/Adafruit-GFX-Library/tree/enable-utf-8
// Verwijder deze regel bij gebruik van de standaard AdafruitGFX en Engelse lettertypen
display.utf8(true);

display.setFont(&pixelfont_extended_latin_13x7_semibold);
display.setTextColor(BLACK);
display.setCursor(10, 30);
display.print("Temperature 23.5");

Opschalen voor een low-res look: De functie setTextSize() tekent elke pixel van het lettertype als een vierkant blok. Hierdoor verandert een klein lettertype in een grote, blokkerige pixeltekst zonder extra flash-geheugen te verbruiken:

display.setFont(&pixelfont_9x5_thin);
display.setTextSize(3);   // Elke letterpixel wordt een blok van 3x3: hoofdletters worden 27 px hoog
display.setCursor(0, 40);
display.print("23.5");

setTextSize(x, y) schaalt de breedte en hoogte afzonderlijk; de regelhoogte schaalt mee.

u8g2

Dezelfde lettertypen zijn beschikbaar in u8g2-formaat; deze zijn herkenbaar aan de toevoeging _u8g2 aan de naam. Zowel de Engelse als de Extended Latin-versies kunnen zonder beperkingen worden gebruikt.

#include <U8g2lib.h>
#include <PixelFontsU8g2.h>   // Laadt alle u8g2-lettertypen; ongebruikte varianten nemen geen flash-geheugen in beslag

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);
u8g2.begin();
u8g2.setFontMode(1);

u8g2.setFont(pixelfont_13x7_semibold_u8g2);
u8g2.drawStr(0, 20, "Temperature 23.5");

u8g2.setFont(pixelfont_extended_latin_13x7_semibold_u8g2);
u8g2.drawUTF8(0, 20 + PIXELFONT_EXTENDED_LATIN_13X7_SEMIBOLD_U8G2_LINE_HEIGHT, "Příliš žluťoučký kůň");
u8g2.sendBuffer();

Elk u8g2-lettertype wordt geleverd met een bijbehorende regelhoogte, bijvoorbeeld PIXELFONT13X7SEMIBOLDU8G2LINE_HEIGHT.

BDF

In de map bdf/ bevindt zich elk lettertype als een BDF-bestand (Unicode-gecodeerd). Deze kunnen worden gebruikt met bdfconv van u8g2, FontForge, de LVGL-fontconverter en andere tools. De regelhoogte wordt bepaald door FONTASCENT + FONTDESCENT.

Overzicht van lettertypen

De naamgeving volgt het patroon: pixelfont[3d | 3dcondensed][extendedlatin]ROWSxCOLS_WEIGHT.

  • ROWSxCOLS: De grootte van het letterraster in pixels (hoogte van hoofdletter x breedte van hoofdletter).
  • WEIGHT: De lijndikte:
  • thin = 1px
  • semibold = 2px
  • bold = 3px
  • _3d: Versie met outline en schaduw. Deze is 3 px hoger en heeft 1 px ruimte tussen karakters en regels.
  • 3dcondensed: Dezelfde 3D-versie, maar zonder ruimte tussen karakters en regels.
  • extendedlatin: Voegt kleine letters met accenten en interpunctie toe.

Standaard lettertypen

HoogteDikteEngelsExtended Latin
5 px1pxpixelfont5x5thin-
7 px1pxpixelfont7x5thinpixelfontextendedlatin7x5thin
9 px1pxpixelfont9x5thinpixelfontextendedlatin9x5thin
11 px1pxpixelfont11x5thinpixelfontextendedlatin11x5thin
13 px1pxpixelfont13x5thinpixelfontextendedlatin13x5thin
13 px1pxpixelfont13x7thinpixelfontextendedlatin13x7thin
13 px2pxpixelfont13x7semiboldpixelfontextendedlatin13x7semibold
15 px1pxpixelfont15x5thinpixelfontextendedlatin15x5thin
15 px2pxpixelfont15x5semiboldpixelfontextendedlatin15x5semibold
15 px1pxpixelfont15x7thinpixelfontextendedlatin15x7thin
15 px2pxpixelfont15x7semiboldpixelfontextendedlatin15x7semibold
17 px1pxpixelfont17x5thinpixelfontextendedlatin17x5thin
17 px2pxpixelfont17x5semiboldpixelfontextendedlatin17x5semibold
17 px1pxpixelfont17x7thinpixelfontextendedlatin17x7thin
17 px2pxpixelfont17x7semiboldpixelfontextendedlatin17x7semibold
17 px3pxpixelfont17x7boldpixelfontextendedlatin17x7bold
21 px1pxpixelfont21x11thinpixelfontextendedlatin21x11thin
21 px3pxpixelfont21x11boldpixelfontextendedlatin21x11bold

3D lettertypen

HoogteDikteEngelsExtended Latin
8 px1pxpixelfont3d5x5_thin-
8 px1pxpixelfont3dcondensed5x5thin-
10 px1pxpixelfont3d7x5_thinpixelfont3dextendedlatin7x5_thin
10 px1pxpixelfont3dcondensed7x5thinpixelfont3dcondensedextendedlatin7x5thin
12 px1pxpixelfont3d9x5_thinpixelfont3dextendedlatin9x5_thin
12 px1pxpixelfont3dcondensed9x5thinpixelfont3dcondensedextendedlatin9x5thin
14 px1pxpixelfont3d11x5_thinpixelfont3dextendedlatin11x5_thin
14 px1pxpixelfont3dcondensed11x5thinpixelfont3dcondensedextendedlatin11x5thin
16 px1pxpixelfont3d13x5_thinpixelfont3dextendedlatin13x5_thin
16 px1pxpixelfont3dcondensed13x5thinpixelfont3dcondensedextendedlatin13x5thin
16 px1pxpixelfont3d13x7_thinpixelfont3dextendedlatin13x7_thin
16 px1pxpixelfont3dcondensed13x7thinpixelfont3dcondensedextendedlatin13x7thin
16 px2pxpixelfont3d13x7_semiboldpixelfont3dextendedlatin13x7_semibold
16 px2pxpixelfont3dcondensed13x7semiboldpixelfont3dcondensedextendedlatin13x7semibold
18 px1pxpixelfont3d15x5_thinpixelfont3dextendedlatin15x5_thin
18 px1pxpixelfont3dcondensed15x5thinpixelfont3dcondensedextendedlatin15x5thin
18 px2pxpixelfont3d15x5_semiboldpixelfont3dextendedlatin15x5_semibold
18 px2pxpixelfont3dcondensed15x5semiboldpixelfont3dcondensedextendedlatin15x5semibold
18 px1pxpixelfont3d15x7_thinpixelfont3dextendedlatin15x7_thin
18 px1pxpixelfont3dcondensed15x7thinpixelfont3dcondensedextendedlatin15x7thin
18 px2pxpixelfont3d15x7_semiboldpixelfont3dextendedlatin15x7_semibold
18 px2pxpixelfont3dcondensed15x7semiboldpixelfont3dcondensedextendedlatin15x7semibold
20 px1pxpixelfont3d17x5_thinpixelfont3dextendedlatin17x5_thin
20 px1pxpixelfont3dcondensed17x5thinpixelfont3dcondensedextendedlatin17x5thin
20 px2pxpixelfont3d17x5_semiboldpixelfont3dextendedlatin17x5_semibold
20 px2pxpixelfont3dcondensed17x5semiboldpixelfont3dcondensedextendedlatin17x5semibold
20 px1pxpixelfont3d17x7_thinpixelfont3dextendedlatin17x7_thin
20 px1pxpixelfont3dcondensed17x7thinpixelfont3dcondensedextendedlatin17x7thin
20 px2pxpixelfont3d17x7_semiboldpixelfont3dextendedlatin17x7_semibold
20 px2pxpixelfont3dcondensed17x7semiboldpixelfont3dcondensedextendedlatin17x7semibold
20 px3pxpixelfont3d17x7_boldpixelfont3dextendedlatin17x7_bold
20 px3pxpixelfont3dcondensed17x7boldpixelfont3dcondensedextendedlatin17x7bold
24 px1pxpixelfont3d21x11_thinpixelfont3dextendedlatin21x11_thin
24 px1pxpixelfont3dcondensed21x11thinpixelfont3dcondensedextendedlatin21x11thin
24 px3pxpixelfont3d21x11_boldpixelfont3dextendedlatin21x11_bold
24 px3pxpixelfont3dcondensed21x11boldpixelfont3dcondensedextendedlatin21x11bold

Aanvullende opmerkingen

De glyph-gegevens zijn in een eenvoudig .txt-formaat inbegrepen, zodat AI kan worden gebruikt om elk gewenst bitmap- of lettertypeformaat te genereren.