Descripción general
Las fuentes en un dispositivo embebido no funcionan igual que en tu ordenador. Esta guía explica por qué, y te lleva paso a paso por la creación de fuentes en PicoPixel: desde elegir una fuente incluida o subir la tuya propia, hasta gestionar idiomas de derecha a izquierda como el árabe y el hebreo, y limitar el espacio que ocupan las fuentes de chino, japonés y coreano. Por último, veremos cómo eliminar las fuentes que ya no necesitas después de hacer pruebas.
¿Por qué hay que convertir las fuentes?
En tu portátil, un archivo de fuente (como un .ttf o .otf) describe cada letra como un conjunto de curvas matemáticas. Tu ordenador tiene suficiente potencia y memoria para dibujar esas curvas de forma fluida a cualquier tamaño.
Un dispositivo pequeño (un ESP32, un chip de smartwatch, un pequeño controlador de pantalla) generalmente no puede hacer eso. No tiene la memoria ni la capacidad de procesamiento para redibujar curvas sobre la marcha. Por eso LVGL adopta un enfoque diferente: en lugar de curvas, almacena cada letra como una pequeña imagen predibujada (un mapa de bits) a un tamaño fijo. Eso es mucho más ligero para el dispositivo.
PicoPixel hace esta conversión por ti. Cuando creas una fuente, tomamos el archivo de fuente original y lo convertimos al formato de mapa de bits que LVGL necesita, extrayendo solo las letras que quieres, en los tamaños que quieres.
Como cada letra se predibuja a un tamaño fijo, una fuente LVGL convertida solo se verá nítida al tamaño que elegiste. Una fuente de 16px no se puede estirar a 32px y seguir viéndose nítida. Si necesitas texto en dos tamaños diferentes, creas la fuente en ambos tamaños (consulta Crear una fuente más abajo, donde puedes elegir varios tamaños a la vez).
Esta es también la razón por la que las fuentes tienen un coste real en un dispositivo: cada letra, a cada tamaño, ocupa un poco de espacio en memoria. Gran parte de esta guía trata de mantener ese coste pequeño, incluyendo solo los caracteres y tamaños que realmente uses.
Fuentes incluidas y fuentes propias
Cuando creas una fuente, tienes dos puntos de partida:
- Bundled (incluidas) — una selección de fuentes populares y probadas listas para usar: Noto Sans, Roboto, Open Sans, Montserrat, Poppins, Inter, Lato, Nunito, Source Sans 3 y más. Son una opción segura y un buen punto de partida.
- Upload (subir) — sube tu archivo
.ttfu.otf. Úsalo cuando tengas una fuente de marca específica o una que cubra un idioma que las incluidas no tienen.
Si subes tu propia fuente, usa un archivo de fuente estático (por ejemplo Roboto-Regular.ttf) en lugar de un archivo de fuente "variable" (como Roboto-VariableFont.ttf). Los archivos estáticos se convierten con mucha más fiabilidad. Los archivos .ttf simples suelen dar mejores resultados.
Independientemente de lo que elijas, hay una vista previa en vivo para que puedas escribir tu propio texto y ver exactamente cómo quedará antes de crear la fuente.
Crear una fuente
Abre el panel Create Font y verás un breve formulario. Esto es lo que hace cada parte:
- Elige tu fuente — selecciona una fuente de Bundled (y su grosor, como Regular o Bold), o cambia a la pestaña Upload y selecciona tu propio archivo.
- Font Name — el nombre que verás en la lista de fuentes de tu proyecto. Elige un nombre fácil de reconocer, sobre todo si vas a crear varias.
- Size (px) — el tamaño en píxeles de la fuente. Puedes seleccionar más de un tamaño a la vez (los ajustes preestablecidos como 16, 22 y 32 se seleccionan con un clic). Recuerda que cada tamaño se genera por separado, así que elige solo los que vayas a usar de verdad.
- Letters — elige qué conjunto de caracteres incluir: Standard (inglés básico), Latin (latino), Greek (griego), Cyrillic (cirílico), Hebrew (hebreo), Arabic (árabe), Thai (tailandés) y varios más. Así le dices a PicoPixel qué letras del idioma necesitas.
- Asian — una opción separada para chino, japonés y coreano. Estos necesitan un tratamiento especial, cubierto en su propia sección más abajo.
También hay un área Advanced para ajustes más precisos, incluyendo Bits per Pixel (cuántos tonos de gris usa cada letra; un valor mayor suaviza los bordes, pero ocupa más espacio; 4 es un buen valor predeterminado) y campos para especificar rangos de caracteres exactos o símbolos a mano. Normalmente puedes dejar los valores predeterminados.
No todas las fuentes incluyen todos los idiomas. Si eliges una escritura no latina y tu vista previa muestra cuadros vacíos en lugar de letras, esa fuente no la soporta — cambia a una fuente de Bundled diseñada para esa escritura, o sube una que sí lo haga. PicoPixel te avisará cuando elijas una escritura que no todas las fuentes admiten.
Escrituras de derecha a izquierda: árabe y hebreo
Idiomas como el árabe y el hebreo se leen de derecha a izquierda, y sus letras necesitan un tratamiento especial. La buena noticia es que lo configuras directamente en el panel Create Font — no hay nada que configurar manualmente.
- En el desplegable Letters, elige Arabic o Hebrew. Este es el paso importante: le dice a PicoPixel que incluya el conjunto correcto de caracteres para esa escritura (las letras básicas del inglés también se incluyen, así que los números y el texto latino siguen funcionando).
- PicoPixel sugerirá una fuente diseñada para esa escritura, por ejemplo, Noto Sans Arabic. Usa la sugerencia (u otra fuente compatible con el sistema de escritura) en lugar de una fuente latina simple, que no contendrá las letras.
- Comprueba la vista previa en vivo. Si las letras se renderizan correctamente, estás listo. Si ves cuadros, la fuente elegida no soporta el sistema de escritura — elige otra.
Las letras árabes cambian de forma según dónde estén en una palabra, y toda la línea fluye de derecha a izquierda. Cuando exportas tu proyecto, PicoPixel detecta automáticamente que has usado texto árabe, persa o hebreo y activa la configuración LVGL correspondiente para las formas de letras conectadas, para que no tengas que buscar y modificar opciones en los archivos de configuración para que se vea bien en el dispositivo.
Lo más importante a recordar: elegir Arabic o Hebrew en el desplegable Letters al crear la fuente es lo que incluye esos caracteres. Si creas primero una fuente normal y solo después añades texto de derecha a izquierda, las letras no estarán ahí — crea la fuente con el sistema de escritura correcto seleccionado desde el principio.
Chino, japonés y coreano
CJK es la abreviatura común para chino, japonés y coreano. Estos idiomas son especiales porque tienen muchos caracteres: el coreano tiene alrededor de 11.000 y el chino tiene más de 20.000. Recuerda que cada carácter se predibuja y se almacena en el dispositivo. Incluir una fuente CJK completa podría añadir megabytes, que simplemente no caben en la mayoría de los dispositivos embebidos.
La solución es incluir solo los caracteres que realmente uses. Una interfaz típica puede mostrar alrededor de un centenar de caracteres distintos, muchos menos que una fuente completa.
Sigue estos pasos:
- En el desplegable Asian, elige Korean, Chinese o Japanese.
- Encuentra el campo Symbols (en el área Advanced) y pega el texto real que mostrará tu interfaz — cada etiqueta, botón y mensaje. PicoPixel incluye un glifo solo para cada carácter que encuentra ahí.
- Para ayudarte a empezar, PicoPixel rellena previamente este campo con palabras comunes de interfaz (como "Configuración", "Confirmar", "Cancelar", etc.) en el idioma que elegiste. Añade tu propio texto.
De esa manera, una fuente que podría haber pesado varios megabytes acaba en unos pocos cientos de kilobytes.
Solo se incluyen los caracteres que listes en Symbols. Si tu interfaz después muestra un carácter que no añadiste, aparecerá como un cuadro en blanco. Cuando tu texto cambie, vuelve y actualiza el campo Symbols, luego vuelve a crear la fuente.
Para CJK, subir la fuente específica que quieres (en lugar de depender de una general) te da el mayor control, y pegar una copia completa y definitiva del texto de tu interfaz significa que no se pierde nada.
Limpieza: eliminar fuentes no usadas
Las fuentes ocupan espacio, y es fácil acumular las que ya no necesitas, especialmente mientras experimentas. Por ejemplo, puede que no estés seguro de si 16px o 22px queda mejor, así que creas ambas y las pruebas. Una vez que hayas decidido, puedes eliminar la que no uses.
PicoPixel facilita esta limpieza con el botón Delete Unused Fonts, en la sección Fonts del panel de recursos. Revisa los widgets del proyecto y elimina con un clic las fuentes que no usa ninguno, para que puedas liberar espacio.
Esta es la forma fácil de experimentar con tamaños. Crea unos cuantos tamaños, ve cuál queda bien en tu diseño, luego pulsa Delete Unused Fonts para limpiar el resto. Cada fuente de la lista muestra su tamaño y ajustes de calidad, así que es fácil ver de un vistazo lo que tienes.
"Delete Unused Fonts" solo elimina fuentes a las que ningún widget hace referencia, por lo que tu diseño no cambiará. También puedes eliminar una sola fuente tú mismo haciendo clic derecho en ella en la lista. Si eliminas algo por accidente, deshacer lo recupera de inmediato.
