Skip to content

Generator Font LCD & OLED (Bitmap ke Array C)

Ubah teks Mandarin atau Latin dan gambar menjadi array C untuk SSD1306, SH1106, ST7920, dan Adafruit GFX. Font piksel 12×12 dan 16×16 yang tajam, keempat mode scan PCtoLCD2002, plus dekoder untuk array tak dikenal.

Tanpa Pelacakan Berjalan di Browser Gratis
Semua berjalan di browser Anda — teks dan gambar tidak pernah meninggalkan perangkat ini.

Cocok dengan memori page SSD1306 / SSD1309 / SH1106 / ST7565 dan MicroPython framebuf.MONO_VLSB — tulis byte langsung ke layar.

Pratinjau

Klik piksel untuk menyalakan atau mematikannya.
    4 glyph · 64 byte
    Referensi: karakter 中 (16 × 16) di setiap arah scan

    Piksel menyala = 1, glyph GNU Unifont. Bandingkan byte ini dengan array Anda untuk mengetahui pengaturan yang dipakai saat membuatnya.

    Arah scan Urutan bit Byte (hex)
    Baris per baris (byte horizontal) MSB first — piksel pertama di bit 7 01 00 01 00 01 00 01 00 3F F8 21 08 21 08 21 08 21 08 21 08 3F F8 21 08 01 00 01 00 01 00 01 00
    Baris per baris (byte horizontal) LSB first — piksel pertama di bit 0 80 00 80 00 80 00 80 00 FC 1F 84 10 84 10 84 10 84 10 84 10 FC 1F 84 10 80 00 80 00 80 00 80 00
    Kolom per kolom (byte vertikal) MSB first — piksel pertama di bit 7 00 00 00 00 0F F0 08 20 08 20 08 20 08 20 FF FF 08 20 08 20 08 20 08 20 0F F0 00 00 00 00 00 00
    Kolom per kolom (byte vertikal) LSB first — piksel pertama di bit 0 00 00 00 00 F0 0F 10 04 10 04 10 04 10 04 FF FF 10 04 10 04 10 04 10 04 F0 0F 00 00 00 00 00 00
    Kolom per page (byte vertikal, urutan page SSD1306) MSB first — piksel pertama di bit 7 00 00 0F 08 08 08 08 FF 08 08 08 08 0F 00 00 00 00 00 F0 20 20 20 20 FF 20 20 20 20 F0 00 00 00
    Kolom per page (byte vertikal, urutan page SSD1306) LSB first — piksel pertama di bit 0 00 00 F0 10 10 10 10 FF 10 10 10 10 F0 00 00 00 00 00 0F 04 04 04 04 FF 04 04 04 04 0F 00 00 00
    Baris per strip (byte horizontal, strip 8 piksel) MSB first — piksel pertama di bit 7 01 01 01 01 3F 21 21 21 21 21 3F 21 01 01 01 01 00 00 00 00 F8 08 08 08 08 08 F8 08 00 00 00 00
    Baris per strip (byte horizontal, strip 8 piksel) LSB first — piksel pertama di bit 0 80 80 80 80 FC 84 84 84 84 84 FC 84 80 80 80 80 00 00 00 00 1F 10 10 10 10 10 1F 10 00 00 00 00

    Font piksel: GNU Unifont (16 px) dan Fusion Pixel Font (12 px), keduanya berlisensi SIL Open Font License 1.1. Teks lisensi

    Kedelapan kombinasi arah scan dan urutan bit diperiksa byte demi byte terhadap implementasi referensi independen, dan preset dicocokkan dengan datasheet SSD1306, SH1106, dan ST7565 serta kode sumber Adafruit GFX, U8g2, LVGL, dan MicroPython. — Tim Go Tools · Oct 3, 2026

    Dibangun dan diverifikasi oleh tim engineering Go Tools.

    Jawaban singkat

    Pengaturan apa yang dibutuhkan OLED SSD1306?

    Kolom per page · LSB first Kolom per page, LSB first, piksel menyala = 1 — jika Anda menulis byte langsung ke memori layar.

    Pengaturan apa yang dibutuhkan Adafruit GFX drawBitmap()?

    Baris per baris · MSB first Baris per baris, MSB first, piksel menyala = 1, setiap baris di-padding hingga byte utuh.

    Berapa byte karakter 16 × 16?

    32 byte 32 byte di semua arah scan. 12 × 12 berarti 24 byte, karakter ASCII 8 × 16 berarti 16.

    Apa arti 顺向 dan 逆向 di PCtoLCD2002?

    逆向 = LSB first 顺向 = MSB first (piksel pertama di bit 7); 逆向 = LSB first (piksel pertama di bit 0).

    Apa itu bitmap font (取模)?

    Sebagian besar controller OLED dan LCD grafis — termasuk SSD1306, SH1106, dan ST7565 — tidak punya font bawaan. Untuk menampilkan karakter, firmware menyalin kisi kecil piksel nyala/mati ke memori layar, satu bit per piksel, delapan piksel per byte. Mengubah glyph menjadi byte-byte itu disebut 取模 dalam tutorial embedded berbahasa Mandarin, pekerjaan yang selama bertahun-tahun dilakukan program Windows PCtoLCD2002.

    Byte saja tidak cukup. Karakter 16 × 16 yang sama bisa dikemas dengan empat cara (baris per baris, kolom per kolom, kolom per page, baris per strip), dan tiap cara bisa menaruh piksel pertama di bit 7 atau bit 0. Delapan deret byte menggambarkan glyph yang sama, dan layar hanya menggambar salah satunya dengan benar. Itulah sebabnya font yang disalin dari tutorial begitu sering tampil tercermin, terbelah dua, atau terputar.

    // 中 (16x16), pages of columns, LSB first, lit = 1 — SSD1306 page order
    const unsigned char zhong[32] = {
      0x00,0x00,0xF0,0x10,0x10,0x10,0x10,0xFF,0x10,0x10,0x10,0x10,0xF0,0x00,0x00,0x00,
      0x00,0x00,0x0F,0x04,0x04,0x04,0x04,0xFF,0x04,0x04,0x04,0x04,0x0F,0x00,0x00,0x00
    };
    // First 16 bytes = page 0 (rows 0-7), one byte per column, bit 0 = top row

    Yang bisa dilakukan generator ini

    Hanzi 12 × 12 dan 16 × 16 yang presisi per piksel

    Font browser adalah outline dengan anti-aliasing; jika di-threshold pada 12 px dengan typeface Song, goresan horizontal 中 hilang begitu saja. Karena itu tool ini menyertakan font bitmap sungguhan: font 16 × 16 mencakup seluruh 6.763 karakter GB2312, sedangkan font 12 × 12 tidak memuat 143 karakter langka, yang digambar dengan font sistem dan diberi tanda.

    Keempat mode scan PCtoLCD2002, kedua urutan bit

    Baris per baris, kolom per kolom, kolom per page, dan baris per strip, masing-masing MSB first atau LSB first, piksel menyala = 1 atau 0. Nama opsinya mengikuti PCtoLCD2002 dan maknanya dicocokkan dengan datasheet SSD1306 serta proyek contoh OLED yang umum, jadi Anda bisa memilih pengaturan yang sama dengan yang dipakai proyek lama.

    Preset yang menyebutkan cocok untuk apa

    Pilih SSD1306, Adafruit GFX, atau XBM dan opsinya langsung diatur. Ubah opsi apa pun secara manual dan tool akan memberi tahu layar serta library mana yang membaca urutan byte itu — atau bahwa tidak ada.

    Dekode array yang sudah Anda punya

    Tempelkan array font yang asal-usulnya tidak jelas, dan kedelapan pembacaan scan/urutan bit digambar berdampingan. Yang terbaca dengan benar menunjukkan pengaturannya; satu klik langsung menerapkannya.

    Gambar ke bitmap dengan dithering sungguhan

    Logo, ikon, dan foto diskalakan ke ukuran layar lalu dikonversi dengan threshold, dithering Floyd–Steinberg, atau Atkinson. Area transparan dihitung sebagai latar, dan threshold berlaku di semua mode.

    Output yang langsung masuk ke proyek

    Array 2-D gaya C51 dengan komentar /*"中",0*/, Arduino PROGMEM dengan offset, dictionary MicroPython bytearray, baris DB A51, atau hex polos. Kode C yang dihasilkan terkompilasi bersih dengan -Wall -Wextra -pedantic.

    Contoh konversi

    中 untuk OLED SSD1306 (16 × 16, kolom per page, LSB first)

    中
    00 00 F0 10 10 10 10 FF 10 10 10 10 F0 00 00 00 00 00 0F 04 04 04 04 FF 04 04 04 04 0F 00 00 00

    32 byte: 16 kolom dari page 0 (baris 0–7), lalu 16 kolom dari page 1 (baris 8–15). Pada 0xFF di kolom 7 semua bit menyala: goresan vertikal melintasi kedelapan baris di kedua page.

    中 yang sama untuk Adafruit GFX drawBitmap (baris per baris, MSB first)

    中
    01 00 01 00 01 00 01 00 3F F8 21 08 21 08 21 08 21 08 21 08 3F F8 21 08 01 00 01 00 01 00 01 00

    Dua byte per baris, 16 baris. 0x01 0x00 hanyalah goresan tengah: piksel paling kiri adalah bit 7 dari byte pertama, sehingga piksel di kolom 7 jatuh di bit 0. Kirim byte ini ke penulisan page SSD1306 dan hasilnya berantakan — glyph sama, pengemasan berbeda.

    A setengah lebar dalam font 16 piksel (8 × 16)

    A
    00 00 00 00 18 24 24 42 42 7E 42 42 42 42 00 00

    Karakter ASCII berlebar setengah: 8 × 16 berarti 16 byte, satu byte per baris saat scan baris per baris. Centang "Beri karakter setengah lebar (A–Z, 0–9) lebar sel penuh" jika driver Anda mengharapkan setiap glyph berukuran 16 × 16.

    Mengapa 12 × 12 butuh 24 byte, bukan 18

    中 (12 × 12, baris per baris, MSB first)
    00 00 04 00 04 00 FF E0 84 20 84 20 84 20 FF E0 04 00 04 00 04 00 04 00

    Setiap baris 12 piksel butuh dua byte; empat bit terakhir byte kedua adalah padding. 12 baris × 2 byte = 24. Semua library display mengalamatkan baris sebagai (width + 7) / 8 byte, jadi mengemas bit lebih rapat akan merusak semuanya.

    Cara membuat data font untuk LCD atau OLED

    1. 1

      Masukkan teks atau seret gambar

      Teks digambar dengan font piksel sungguhan: 12 × 12 (Fusion Pixel) atau 16 × 16 (GNU Unifont), dengan ASCII setengah lebar. Untuk logo dan ikon, pindah ke tab Gambar dan atur ukuran target, misalnya 128 × 64.

    2. 2

      Pilih layar atau library tujuan

      SSD1306 / SH1106 / ST7565 butuh byte vertikal dalam urutan page dengan piksel teratas di bit 0. Adafruit GFX, TFT_eSPI, U8g2 drawBitmap, dan LVGL butuh byte horizontal dengan piksel paling kiri di bit 7. XBM / U8g2 drawXBM sama, tetapi piksel paling kiri di bit 0.

    3. 3

      Periksa pratinjau, perbaiki piksel bila perlu

      Pratinjau menampilkan persis bitmap yang dienkode. Klik piksel mana saja untuk menyalakan atau mematikannya, atau geser glyph dengan kolom pergeseran.

    4. 4

      Salin atau unduh

      Pilih C (gaya C51 PCtoLCD2002), Arduino PROGMEM, MicroPython bytearray, assembly A51, atau hex polos. Baris pertama output mencatat arah scan, urutan bit, dan ukuran glyph, sehingga array tersebut mendokumentasikan dirinya sendiri.

    Karakter kacau: gejala → pengaturan yang salah

    Setiap kelompok 8 piksel tercermin kiri-kanan

    Byte horizontal dengan urutan bit yang salah. Adafruit GFX drawBitmap() butuh MSB first; XBM dan U8g2 drawXBM() butuh LSB first.

    ✗ Salah
    U8g2 drawXBM() diberi byte MSB first
    ✓ Benar
    drawXBM() → preset XBM (baris per baris, LSB first)

    Setiap 8 baris terbalik atas-bawah

    Byte vertikal dengan urutan bit yang salah. Controller tipe SSD1306 menaruh D0 di baris teratas, jadi butuh LSB first.

    ✗ Salah
    Kolom per page, MSB first → SSD1306
    ✓ Benar
    Kolom per page, LSB first → SSD1306

    Separuh atas dan bawah saling berselang

    Kolom per kolom tertukar dengan kolom per page. Keduanya menghasilkan byte yang sama hanya untuk glyph setinggi maksimal 8 piksel; pada 16 piksel urutan byte-nya berbeda.

    ✗ Salah
    Kolom per kolom → penulisan page SSD1306
    ✓ Benar
    Kolom per page → penulisan page SSD1306

    Glyph terbalik sepanjang diagonal, atau warnanya terbalik

    Terbalik diagonal berarti byte horizontal dibaca sebagai vertikal (atau sebaliknya). Teks gelap di latar menyala berarti dipilih menyala = 0 padahal layar mengharapkan menyala = 1.

    ✗ Salah
    Byte baris per baris dikirim ke page SSD1306
    ✓ Benar
    Tempel array ke tab dekoder dan pilih pratinjau yang terbaca

    Kapan Anda membutuhkannya

    Teks Mandarin di OLED SSD1306 0,96"
    Pembacaan suhu, menu, atau baris status berbahasa Mandarin di board STM32 atau 51. Gunakan font 16 × 16 dengan preset SSD1306 dan tempelkan array ke oled_font.h yang sudah ada di proyek contoh Anda.
    Logo boot di layar Arduino atau ESP32
    Seret logo PNG, atur 128 × 64, pilih preset Adafruit GFX, lalu panggil display.drawBitmap(0, 0, logo, 128, 64, WHITE).
    Ikon dan satuan untuk UI LVGL atau U8g2
    Simbol baterai, Wi-Fi, dan °C sebagai gambar 1-bit. Gunakan preset Adafruit GFX / LVGL untuk byte horizontal MSB first, atau preset XBM untuk U8g2 drawXBM().
    Bekerja di Mac atau Linux
    PCtoLCD2002 dan tool klasik 字模提取 adalah program Windows. Tool ini berjalan di browser modern apa pun tanpa instalasi.
    Membedah proyek warisan
    Developer sebelumnya meninggalkan array Hzk[][32] tanpa catatan. Tempelkan ke dekoder untuk mengetahui cara array itu dibuat sebelum menambahkan karakter baru dengan format yang sama.

    Cara kerja empat arah scan

    Baris per baris (byte horizontal)
    Baris diambil dari atas ke bawah; dalam satu baris, tiap byte memuat delapan piksel bersebelahan dari kiri ke kanan. Baris 16 piksel berarti dua byte. Ini tata letak Adafruit GFX drawBitmap(), U8g2 drawBitmap(), file XBM, GDRAM ST7920, dan gambar 1-bit LVGL.
    Kolom per page (byte vertikal) — urutan SSD1306
    Glyph dipotong menjadi page setinggi delapan baris. Untuk tiap page, kolom diambil dari kiri ke kanan dan tiap byte memuat delapan piksel kolom itu. Ini sama dengan GDDRAM SSD1306, SH1106, dan ST7565, yang datasheet-nya menyatakan bit data D0 ditulis ke baris teratas — jadi urutan bit yang cocok adalah LSB first.
    Kolom per kolom, dan baris per strip
    Kolom per kolom mengambil tiap kolom dari atas ke bawah melintasi semua page sebelum bergeser ke kanan; ini cocok dengan mode vertical addressing SSD1306. Baris per strip mengambil strip selebar 8 piksel, semua barisnya, lalu strip berikutnya; tidak ada library utama yang memakainya, tetapi proyek PCtoLCD2002 lama memakainya. Masing-masing tampak identik dengan pasangannya hanya jika glyph paling tinggi (atau lebar) 8 piksel, itulah sebabnya kekeliruan ini tidak ketahuan saat uji dengan 8 × 8.
    Urutan bit dan nilai piksel menyala
    MSB first menaruh piksel pertama yang diambil (paling kiri, atau paling atas) di bit 7; LSB first menaruhnya di bit 0. PCtoLCD2002 menamainya 顺向 (arah maju, MSB first) dan 逆向 (arah balik, LSB first). Menyala = 1 (阴码) adalah yang diharapkan OLED, TFT drawBitmap(), dan LVGL A1; menyala = 0 (阳码) hanya untuk driver yang mendefinisikan 0 sebagai nyala.
    Padding saat ukuran bukan kelipatan 8
    Setiap baris (byte horizontal) atau setiap page (byte vertikal) di-padding sendiri-sendiri hingga byte utuh, dan bit padding bernilai 0. Dengan kolom per page dan glyph 12 piksel, page kedua membawa 4 baris padding; driver yang menulis page utuh akan menghapus 4 baris di bawah glyph. Tool memberi peringatan jika ini terjadi.

    Supaya benar sejak percobaan pertama

    Pilih preset berdasarkan fungsi gambar, bukan layarnya
    SSD1306 yang dikendalikan Adafruit_SSD1306 melewati drawBitmap(), jadi butuh byte horizontal MSB first meskipun memori controller-nya vertikal. Pilih preset yang cocok dengan fungsi yang dipanggil kode Anda.
    Gunakan font piksel untuk 12 dan 16 px
    Font outline di bawah sekitar 20 px kehilangan goresan saat di-threshold. Fusion Pixel 12 dan Unifont 16 digambar di atas kisi piksel, dan opsi 2× menghasilkan 24 × 24 dan 32 × 32 yang bersih.
    Pertahankan komentar header
    Baris output pertama mencatat arah scan, urutan bit, dan ukuran. Enam bulan kemudian, hanya itu catatan tentang cara array tersebut dibuat.
    Uji dengan karakter asimetris
    Glyph simetris seperti 中, 田, atau H menyembunyikan kesalahan cermin. Coba F, 7, atau 乙 dulu: jika terbaca benar, semua opsi sudah tepat.
    Perbaiki pencerminan seluruh layar di driver
    Jika seluruh isi layar tercermin atau terbalik, bukan hanya font Anda, ubah segment remap (A0h/A1h) dan arah scan COM (C0h/C8h) di urutan inisialisasi. Mengubah pengaturan font hanya akan merusak kode lain.

    Pertanyaan yang sering diajukan

    Pengaturan apa yang harus dipakai untuk OLED SSD1306 atau SH1106?
    Jika kode Anda menulis byte font langsung ke layar (kebanyakan contoh 51 dan STM32): kolom per page, LSB first, menyala = 1 — yaitu preset SSD1306. Jika menggambar lewat Adafruit_SSD1306 atau U8g2 drawBitmap(), pakai preset Adafruit GFX, karena fungsi-fungsi itu membaca byte horizontal MSB first lalu mengonversinya sendiri.
    Karakter saya tampil tercermin, terbalik, atau acak. Apa yang salah?
    Setiap gejala menunjuk ke satu pengaturan. Tiap 8 piksel tercermin kiri-kanan: urutan bit salah pada byte horizontal. Tiap 8 baris terbalik: urutan bit salah pada byte vertikal. Separuh atas dan bawah berselang: kolom per kolom tertukar dengan kolom per page. Terbalik sepanjang diagonal: byte horizontal tertukar dengan vertikal. Warna terbalik: menyala = 1 dan menyala = 0 tertukar. Jika seluruh layar yang tercermin, bukan hanya teks Anda, perbaiki urutan inisialisasi driver.
    Mengapa 12 × 12 butuh 24 byte, bukan 18?
    Setiap baris (atau setiap page 8 baris) di-padding sendiri hingga byte utuh: 12 piksel butuh 2 byte, dan 12 baris × 2 = 24. Library display mengalamatkan baris sebagai (width + 7) / 8 byte, jadi glyph 18 byte yang dikemas rapat akan salah dibaca oleh semuanya.
    Mengapa teks 12 piksel saya menghapus baris di bawahnya pada OLED?
    Dengan kolom per page, glyph 12 piksel mengisi satu page penuh dan separuh page berikutnya; 4 bit sisanya di page kedua adalah padding nol. Driver yang menulis page utuh menghapus 4 baris itu. Gambar lewat frame buffer yang mengatur piksel satu per satu, atau tempatkan teks 12 piksel sehingga baris kosongnya jatuh di area yang tidak berisi gambar lain.
    Bisakah saya memakai ini sebagai pengganti PCtoLCD2002 di Mac?
    Bisa. Tool ini berjalan di browser modern apa pun, menawarkan keempat mode scan yang sama, kedua urutan bit, dan menyala = 1 / menyala = 0, dan output C-nya mengikuti gaya C51 PCtoLCD2002 dengan komentar /*"字",0*/, jadi bisa langsung ditempel ke proyek yang dibangun di sekitar array bergaya Hzk[][32]. Tool ini tidak membuat file pustaka font lengkap maupun indeksnya. Bentuk glyph-nya berasal dari GNU Unifont dan Fusion Pixel, bukan SimSun milik Windows, sehingga byte-nya tidak akan sama persis dengan array buatan PCtoLCD2002 — buat ulang seluruh tabel di sini alih-alih mencampur keduanya. Situs ini tidak berafiliasi dengan PCtoLCD2002 maupun pembuatnya, bukan versi web resminya, dan tidak menyediakan unduhan program tersebut.
    Mengapa memakai font piksel, bukan font sistem?
    Font sistem adalah outline yang digambar dengan anti-aliasing, dan browser tidak bisa mematikannya. Pada 12 atau 16 piksel, men-threshold tepi abu-abu itu menghilangkan goresan tipis — garis horizontal 中 lenyap sepenuhnya pada typeface Song 12 piksel. GNU Unifont (16 px) dan Fusion Pixel (12 px) dirancang di atas kisi piksel, jadi tidak ada yang hilang. Font sistem tetap tersedia untuk ukuran yang lebih besar: typeface sans-serif (Hei) sudah layak mulai sekitar 24 px, sedangkan typeface Song masih bisa kehilangan goresan pada ukuran itu.
    Karakter apa saja yang dicakup font piksel?
    Seluruh GB2312 — 6.763 hanzi sederhana plus tanda baca lebar penuh — dan ASCII yang dapat dicetak, huruf Latin beraksen (é, ß, ł, ş, ő), Yunani, Sirilik, kana Jepang, serta simbol umum seperti ℃, panah, dan box drawing. Fusion Pixel 12 px tidak memiliki sebagian karakter dan simbol langka. Hangul Korea dan hanzi di luar GB2312 (bentuk tradisional, banyak kanji Jepang) digambar dengan font sistem sebagai gantinya dan dicantumkan di bawah pratinjau, sehingga Anda tahu glyph mana yang perlu diperiksa.
    Bagaimana cara mengonversi logo atau ikon ke array C?
    Buka tab Gambar, seret file, atur ukuran layar (128 × 64 untuk OLED 0,96"), dan biarkan "Muat di dalam, pertahankan proporsi" tetap terpilih. Piksel gelap menjadi piksel menyala; centang balik warna untuk gambar terang di latar gelap. Gunakan tanpa dithering untuk logo dan teks, Floyd–Steinberg atau Atkinson untuk foto.
    Bagaimana mengetahui cara sebuah array font dibuat?
    Tempelkan ke tab "Pratinjau array yang sudah ada". Komentar diabaikan, dan sintaks C, Arduino, A51, maupun MicroPython semuanya diterima. Ukuran glyph ditebak dari jumlah byte, dan kedelapan kombinasi arah scan dan urutan bit digambar. Yang terbaca dengan benar adalah pengaturan Anda, dan "Gunakan pengaturan ini" menyalinnya ke generator.
    Apakah teks atau gambar saya diunggah?
    Tidak. Glyph dirender dan dienkode di browser Anda. Font piksel diunduh sekali dari situs ini, dan apa pun yang Anda ketik atau seret tidak dikirim ke mana pun.