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 dominar las fuentes de gran tamaño usadas para chino, japonés y coreano. Por último, veremos una práctica función de limpieza para cuando hayas estado experimentando.
¿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 queda bloqueada 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:
- Incluidas — un conjunto curado de fuentes populares y bien 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.
- Subir — trae tu propio 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 funcionar mejor de todos.
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 crearlo.
Crear una fuente
Abre el panel Crear Fuente y verás un breve formulario. Esto es lo que hace cada parte:
- Elige tu fuente — selecciona una fuente Incluida (y su peso, como Regular o Bold), o cambia a la pestaña Subir y selecciona tu propio archivo.
- Nombre de fuente — el nombre que verás en la lista de fuentes de tu proyecto. Dale algo memorable, especialmente si tendrás varias.
- Tamaño (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 están a un toque). Recuerda que cada tamaño se genera por separado, así que elige solo los que vayas a usar de verdad.
- Letras — elige qué conjunto de caracteres incluir: Estándar (inglés básico), Latino, Griego, Cirílico, Hebreo, Árabe, Tailandés y varios más. Así le dices a PicoPixel qué letras del idioma necesitas.
- Asiático — 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 Avanzado para ajustes finos, incluyendo Bits por Píxel (cuántos tonos de gris usa cada letra; más alto se ve más suave pero ocupa más espacio; 4 es un buen valor predeterminado) y campos para especificar rangos de caracteres exactos o símbolos a mano. La mayoría de las personas nunca necesita tocar esto.
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 Incluida 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 Crear Fuente — no hay nada que configurar manualmente.
- En el desplegable Letras, elige Árabe o Hebreo. 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 script) 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 script — 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 rebuscar en archivos de configuración para que se vea bien en el dispositivo.
Lo más importante a recordar: elegir Árabe o Hebreo en el desplegable Letras 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 script 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 bien 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 solo un centenar o así de caracteres diferentes, y eso es minúsculo en comparación.
Así es como hacerlo:
- En el desplegable Asiático, elige Coreano, Chino o Japonés.
- Encuentra el campo Símbolos (en el área Avanzado) 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 pre-rellena 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 Símbolos. 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 Símbolos, 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, la otra es solo peso muerto.
PicoPixel hace esto indoloro. En el área de Fuentes de tus recursos, hay un botón Eliminar Fuentes No Usadas. Escanea cada widget de tu proyecto, encuentra las fuentes que nada está usando en realidad, y las elimina de un clic — así puedes limpiar los restos y liberar espacio para las fuentes que sí necesitas.
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 Eliminar Fuentes No Usadas 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.
"Eliminar Fuentes No Usadas" 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.
