Как загрузить любой шрифт Google Fonts на дисплей ESP32 — без Processing и ручной конвертации

Вот важная новость с фронта ИИ: kmoseenk 10 минут назад Как загрузить любой шрифт Google Fonts на дисплей ESP32 — без Processing и ручной конвертации Простой 4 мин 442 Блог компании OTUS Программирование микроконтроллеров * Интерфейсы * Туториал Перевод Автор оригинала: Chris Greening Каждый раз, когда я вывожу текст на TFT-дисплей через TFT_eSPI, приходится смотреть на одни и те же встроенные шрифты: жирные, зубчатые и будто прямиком из 1980-х. И это особенно обидно, потому что библиотека уже много лет умеет отрисовывать красивые сглаженные шрифты (smooth fonts). Проблема никогда не была в самой отрисовке — она была в инструментах.

Официальный способ создать гладкий шрифт предполагает установку Processing IDE, редактирование Java-скетча и повторный запуск для каждого шрифта и каждого размера. В итоге в большинстве проектов с этим просто не связываются. Поэтому я сделал инструмент, который решает эту проблему.

Технические детали

com — бесплатный браузерный инструмент, который преобразует любой из более чем 1900 шрифтов Google Fonts или ваш собственный TTF-файл в шрифты, готовые для использования с TFT_eSPI, M5Stack/M5GFX или LVGL. Там же можно увидеть попиксельно точный предпросмотр того, как шрифт будет выглядеть на вашем дисплее. Всё работает прямо в браузере: файлы шрифтов никуда не загружаются.

Дальше разберём, что на самом деле находится внутри этих файлов шрифтов и что стоит знать перед их использованием. Что на самом деле представляет собой «гладкий шрифт»Гладкие шрифты в TFT_eSPI — это файлы VLW, формат которых достался библиотеке от проекта Processing. VLW устроен до неприличия просто: небольшой заголовок с количеством глифов, размером, верхним и нижним выносами, таблица метрик каждого глифа, а затем необработанные 8-битные альфа-маски — по одному байту на пиксель.

Никаких векторных контуров, хинтинга или кернинга. Шрифт заранее растеризуется на компьютере, а микроконтроллеру остаётся лишь копировать готовые пиксели на экран. «Сглаживание» обеспечивает именно альфа-канал.

Отраслевые последствия

В каждом пикселе хранится степень покрытия глифом — от 0 до 255. Во время отрисовки библиотека смешивает цвет текста с цветом фона в цветовом пространстве RGB565:pixel = (fg × alpha + bg × (255 − alpha)) / 256Именно поэтому для сглаженных шрифтов в tft. setTextColor(TFT_WHITE, TFT_BLACK) нужно указывать оба цвета: прозрачности здесь нет, есть только смешивание с заранее известным фоном.

Если вывести текст поверх фотографии, по краям букв появятся цветные ореолы. Это не ошибка шрифта, а особенность формата. PROGMEM или LittleFS?

Загрузить VLW на микроконтроллер можно двумя способами, и инструмент поддерживает оба:Заголовочный файл . h, в котором шрифт хранится как массив байтов в PROGMEM. Это самый простой вариант: подключаете файл через #include, вызываете tft.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.