By Jason Chu in ESP32 —

ESP32-S3 + 2.8 吋 TFT LCD 顯示繁體中文（LovyanGFX）

使用 LovyanGFX 函式庫，在 ESP32-S3 開發板上驅動 2.8 吋 TFT LCD，內建 efontTW 字型直接顯示繁體中文，從接線、設定到顯示圖形與中文字，一步步帶你完成。

ESP32-S3 + 2.8 吋 TFT LCD 顯示繁體中文（LovyanGFX）

想在 ESP32-S3 的 TFT 螢幕上顯示繁體中文嗎？這篇教學帶你從接線到顯示中文字，一步步搞定。我們使用 LovyanGFX 函式庫，內建繁體中文字型，不用自己轉字型檔，設定也比 TFT_eSPI 直覺很多。

使用材料

  • ESP32-S3-DevKitC-1（N16R8 版本）
  • 2.8 吋 TFT LCD 模組（ST7789 驅動，240×320 解析度）
  • 杜邦線（母對母最穩）
  • Micro USB 傳輸線
ESP32-S3 N16R8 開發板 (16MB Flash / 8MB PSRAM)
傑森創工，專注於Arduino、ESP32、樹莓派(Raspberry Pi)、物聯網、創客(Maker)相關商品的研究，專業銷售Arduino材料、Arduino教材、各種電子材料、開發板、Arduino套件、感測器模組，以及各類工具。更提供許多獨家的專題套件，供大學或高中職學生製作Arduino、ESP32專題。最專業的Arduino、ESP32供應商。
傑森創工 - 網路商店 - Arduino、ESP32的專家，創客的好朋友
ESP32-S3 專用 GPIO 擴展板
傑森創工，專注於Arduino、ESP32、樹莓派(Raspberry Pi)、物聯網、創客(Maker)相關商品的研究，專業銷售Arduino材料、Arduino教材、各種電子材料、開發板、Arduino套件、感測器模組，以及各類工具。更提供許多獨家的專題套件，供大學或高中職學生製作Arduino、ESP32專題。最專業的Arduino、ESP32供應商。
傑森創工 - 網路商店 - Arduino、ESP32的專家，創客的好朋友
2.8吋SPI LCD 240*320 TFT模組 ST7789
2.8吋彩屏，支援16BIT RGB 65K色顯示，顯示色彩豐富 320X240解析度，可選觸摸功能 採用SPI序列匯流排，只需幾個IO即可點亮顯示 帶SD卡槽方便擴展實驗 提供豐富的示例程序 軍工級工藝標準,長期穩定工作 提供底層驅動技術支援
傑森創工 - 網路商店 - Arduino、ESP32的專家，創客的好朋友

為什麼選 LovyanGFX？

TFT_eSPI LovyanGFX
繁體中文支援 需自行轉換字型檔 內建 efontTW，開箱即用
設定方式 改函式庫原始碼 User_Setup.h 在自己的程式碼裡設定
字型大小 需個別轉換 內建 10/12/14/16/24px
粗體/斜體 不支援 內建支援

LovyanGFX 最大的優勢就是不用改函式庫原始碼，所有螢幕設定都寫在你自己的 .ino 裡面，搬到別台電腦也不用重新設定。

接線

ESP32-S3 N16R8 版本有些 GPIO 被 PSRAM 和 Flash 佔用，以下腳位經過確認安全可用：

LCD 模組排針 ESP32-S3 GPIO 說明
VCC 3.3V 供電
GND GND 接地
CS GPIO 15 螢幕片選
RESET GPIO 16 重置
DC GPIO 17 資料/命令切換
SDI (MOSI) GPIO 18 SPI 資料
SCK GPIO 8 SPI 時鐘
LED 3.3V 背光（直接接 3.3V）
注意： SDO (MISO) 和觸控相關的腳位（T_CLK、T_CS 等）暫時不接，先確保螢幕能正常顯示。之後傑森還會介紹如何使用觸控哦！
注意： 每一個腳位一定要很穩定的接好，不然只要有一條線連線不穩，就無法顯示，一定要注意！
線實在太多，傑森就不畫Fritzing接線圖了啦，畫了太亂真的也看不清的^^

N16R8 不能用的 GPIO

GPIO 範圍 原因
GPIO 26~32 連接內建 Flash
GPIO 33~37 連接 PSRAM（N16R8 專屬）
GPIO 19~20 USB-JTAG
GPIO 0 Boot 按鈕

如果你用的是 N8R2 版本，GPIO 33~37 可以正常使用。

Arduino IDE 設定

1. 安裝開發板

在 Board Manager 搜尋 esp32 by Espressif 並安裝，然後選擇 ESP32S3 Dev Module。

2. 安裝函式庫

在 Library Manager 搜尋 LovyanGFX 並安裝。

其它有關ESP32 S3的設定，建議大家先看另一篇的介紹哦！

ESP32-S3 N16R8 開發板介紹
傑森創工嚴選：ESP32-S3 N16R8 頂規開發板！搭載 16MB Flash 與 8MB 高速 PSRAM，完美突破記憶體瓶頸。專為複雜圖形 UI、AI 視覺與高階 IoT 專案打造，全面升級您的硬體效能！
傑森創工 - 教學網Jason Chu

程式碼解說

LovyanGFX 設定類別

LovyanGFX 使用自訂的 C++ 類別來設定螢幕參數，這是它跟 TFT_eSPI 最大的不同。所有設定都寫在你的程式碼裡，不用動到函式庫本身：

#include <LovyanGFX.hpp>

class LGFX : public lgfx::LGFX_Device {
  lgfx::Bus_SPI _bus_instance;
  lgfx::Panel_ST7789 _panel_instance;

public:
  LGFX(void) {
    // SPI 匯流排設定
    {
      auto cfg = _bus_instance.config();
      cfg.spi_host   = SPI2_HOST;   // ESP32-S3 使用 SPI2_HOST
      cfg.spi_mode   = 0;
      cfg.freq_write  = 40000000;   // SPI 寫入頻率 40MHz
      cfg.freq_read   = 16000000;
      cfg.pin_sclk   =  8;         // SCK
      cfg.pin_mosi   = 18;         // MOSI (SDI)
      cfg.pin_miso   = -1;         // 不接 MISO
      cfg.pin_dc     = 17;         // DC
      _bus_instance.config(cfg);
      _panel_instance.setBus(&_bus_instance);
    }
    // 面板設定
    {
      auto cfg = _panel_instance.config();
      cfg.pin_cs     = 15;          // CS
      cfg.pin_rst    = 16;          // RESET
      cfg.pin_busy   = -1;
      cfg.memory_width  = 240;      // 螢幕解析度
      cfg.memory_height = 320;
      cfg.panel_width   = 240;
      cfg.panel_height  = 320;
      cfg.readable   = false;
      cfg.invert     = false;       // 顏色反轉（不對就改 true）
      cfg.rgb_order  = false;       // 紅藍反了就改 true
      cfg.dlen_16bit = false;
      cfg.bus_shared = false;
      _panel_instance.config(cfg);
    }
    setPanel(&_panel_instance);
  }
};

重點說明：

  • Panel_ST7789：這裡要對應你的螢幕驅動 IC。常見的還有 Panel_ILI9341、Panel_ST7735 等，選錯的話螢幕會全白。
  • SPI2_HOST：ESP32-S3 要用 SPI2_HOST，不是普通 ESP32 的 VSPI_HOST。
  • cfg.invert 和 cfg.rgb_order：如果畫面顏色不對，調整這兩個值。

驅動 IC 怎麼確認？

很多 2.8 吋模組的 PCB 上印著 ILI9341，但實際上可能是 ST7789。如果程式跑了但螢幕全白，換一個驅動試試看是最快的排查方式。

完整範例程式碼

以下程式會在螢幕上顯示標題列、幾何圖形、漸層色條、以及三種大小的繁體中文字型：

#include <LovyanGFX.hpp>

class LGFX : public lgfx::LGFX_Device {
  lgfx::Bus_SPI _bus_instance;
  lgfx::Panel_ST7789 _panel_instance;

public:
  LGFX(void) {
    {
      auto cfg = _bus_instance.config();
      cfg.spi_host   = SPI2_HOST;
      cfg.spi_mode   = 0;
      cfg.freq_write  = 40000000;
      cfg.freq_read   = 16000000;
      cfg.pin_sclk   =  8;
      cfg.pin_mosi   = 18;
      cfg.pin_miso   = -1;
      cfg.pin_dc     = 17;
      _bus_instance.config(cfg);
      _panel_instance.setBus(&_bus_instance);
    }
    {
      auto cfg = _panel_instance.config();
      cfg.pin_cs     = 15;
      cfg.pin_rst    = 16;
      cfg.pin_busy   = -1;
      cfg.memory_width  = 240;
      cfg.memory_height = 320;
      cfg.panel_width   = 240;
      cfg.panel_height  = 320;
      cfg.readable   = false;
      cfg.invert     = false;
      cfg.rgb_order  = false;
      cfg.dlen_16bit = false;
      cfg.bus_shared = false;
      _panel_instance.config(cfg);
    }
    setPanel(&_panel_instance);
  }
};

LGFX display;

void setup() {
  Serial.begin(115200);
  delay(500);

  display.init();
  display.setRotation(1);  // 橫向顯示（0~3 可調整方向）
  display.fillScreen(TFT_BLACK);

  // ===== 標題列 =====
  display.fillRect(0, 0, 320, 40, display.color565(0, 80, 160));
  display.setFont(&fonts::efontTW_24);
  display.setTextColor(TFT_WHITE);
  display.setCursor(10, 8);
  display.println("傑森創工 測試畫面");

  // ===== 幾何圖形 =====
  display.fillRoundRect(10, 50, 90, 60, 8, TFT_RED);
  display.setFont(&fonts::efontTW_14);
  display.setTextColor(TFT_WHITE);
  display.setCursor(25, 70);
  display.println("矩形");

  display.fillCircle(160, 80, 30, TFT_GREEN);
  display.setTextColor(TFT_BLACK);
  display.setCursor(143, 73);
  display.println("圓形");

  display.fillTriangle(230, 50, 200, 110, 260, 110, TFT_CYAN);
  display.setTextColor(TFT_BLACK);
  display.setCursor(213, 85);
  display.println("三角");

  // ===== 漸層色條 =====
  for (int x = 10; x < 310; x++) {
    uint8_t r = map(x, 10, 310, 255, 0);
    uint8_t b = map(x, 10, 310, 0, 255);
    display.drawFastVLine(x, 125, 20, display.color565(r, 0, b));
  }
  display.setFont(&fonts::efontTW_12);
  display.setTextColor(TFT_WHITE);
  display.setCursor(120, 148);
  display.println("漸層色條");

  // ===== 中文字型大小展示 =====
  display.setTextColor(TFT_YELLOW);
  display.setFont(&fonts::efontTW_12);
  display.setCursor(10, 170);
  display.println("12px 小字：ESP32-S3 開發板");

  display.setFont(&fonts::efontTW_16);
  display.setCursor(10, 190);
  display.println("16px 中字：溫度 25.6°C");

  display.setFont(&fonts::efontTW_24);
  display.setCursor(10, 212);
  display.println("24px 大字：繁體中文OK");

  Serial.println("=== Done ===");
}

void loop() {}

efontTW 繁體中文字型一覽

LovyanGFX 內建的 efontTW 字型有四種樣式，每種五個大小：

字型名稱 說明
efontTW_24 一般
efontTW_24_b 粗體
efontTW_24_i 斜體
efontTW_24_bi 粗斜體

大小可選：10、12、14、16、24（把上面的 24 換成你要的數字即可）。

提醒： 不要用 efontCN，那是簡體中文字型，很多繁體字會顯示成方框（□）。繁體中文請一律使用 efontTW。

字型佔用空間

efontTW 中文字型是編譯時直接包進韌體裡的，每多用一個字型大小，程式就會變大。建議只 include 你實際會用到的 2~3 個大小就好，不要五種全用。

常見問題排查

螢幕全白

這是最常遇到的問題，可能原因：

  1. 驅動 IC 選錯 — 把 Panel_ST7789 換成 Panel_ILI9341 試試（或反過來）
  2. 接線鬆脫 — 特別是麵包板接線，SPI 訊號非常敏感，任何一條線接觸不良就會全白
  3. GPIO 衝突 — N16R8 的 GPIO 33~37 被 PSRAM 佔用，確認沒有用到這些腳位
  4. DC 和 RESET 接反 — 交換這兩條線試試

顏色不對

  • 紅藍反了 → 把 cfg.rgb_order 改成 true
  • 整體顏色反轉 → 把 cfg.invert 改成 true

畫面方向不對

調整 display.setRotation() 的值：0、1、2、3 分別對應四個方向。

繁體字顯示方框（□）

確認用的是 efontTW 而不是 efontCN。

編譯錯誤 Sketch too big

到 Tools → Partition Scheme 改成 Huge APP (3MB No OTA/1MB SPIFFS)。

移動就白屏

麵包板接觸不良，特別是 GND。建議用母對母杜邦線直接連接 LCD 和 ESP32-S3，跳過麵包板。

繪圖函式速查表

LovyanGFX 的繪圖 API 跟 TFT_eSPI / Adafruit_GFX 很像，常用的有：

函式 說明
fillScreen(color) 填滿整個螢幕
fillRect(x, y, w, h, color) 填滿矩形
fillRoundRect(x, y, w, h, r, color) 圓角矩形
fillCircle(x, y, r, color) 填滿圓形
fillTriangle(x1,y1, x2,y2, x3,y3, color) 填滿三角形
drawLine(x1, y1, x2, y2, color) 畫線
drawRect(x, y, w, h, color) 矩形邊框
drawFastVLine(x, y, h, color) 垂直線（快速）
drawFastHLine(x, y, w, color) 水平線（快速）
setFont(&fonts::xxx) 設定字型
setTextColor(fg, bg) 文字顏色（前景, 背景）
setCursor(x, y) 游標位置
setRotation(0~3) 螢幕旋轉方向
color565(r, g, b) 自訂 RGB 顏色

下一步

這篇教學涵蓋了基本的螢幕顯示和繁體中文輸出。後續教學會再介紹：

  • 觸控功能整合（XPT2046）
  • SD 卡讀取自訂字型（TTF 黑體）
  • LVGL GUI 框架整合
  • 實用專案：中文氣象站介面
Previous

《ESP32 入門》ESP32 光敏電阻教學

You might also like...