Herramientas de diseño

Codificador de fuentes Base64 — Generador de @font-face

Codifica un archivo de fuente a Base64 en el navegador y genera un fragmento @font-face incrustable: útil para demos, plantillas de correo electrónico y páginas de un solo archivo que incrustan fuentes temporalmente. Los archivos permanecen locales.

Cambio rápido→CSS a Tailwind

FuenteBase64CSS

Cambio rápido:CSS a Tailwind Codificar/Decodificar Base64

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

Crea una página de demo de un solo archivo
Incrusta temporalmente un recurso de fuente
Comprueba el tamaño de la carga útil de la fuente codificada

Cómo usar

Elige un archivo de fuente
Introduce el nombre de la familia tipográfica
Copia el CSS @font-face generado

Entrada y salida de ejemplo

Fuente

demo.woff2

Salida

@font-face { src: url(data:font/woff2;base64,...) }

FAQ

¿Es apto para producción?

Las fuentes inline grandes inflan mucho el CSS. La producción suele preferir archivos de fuente separados con caché.

¿La fuente se sube?

No. La lectura y la codificación Base64 se realizan localmente en el navegador.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Codificar/Decodificar Base64

Codificador y decodificador de Base64

Disponible

Codifica y decodifica Base64 en el navegador, con variantes estándar y URL-safe, detección automática de dirección y conversión opcional de archivo a Base64. Útil para depurar APIs y preparar datos localmente.

Base64 Codificación Desarrollador

Abrir herramienta

CSS a Tailwind

CSS a Tailwind — Mapeador de declaraciones

Disponible

Pega declaraciones CSS y mápealas a clases utilitarias de Tailwind cuando sea posible. Las reglas comunes de maquetación, espaciado y color se convierten en clases estándar; los valores sin coincidencia recurren a la sintaxis de valor arbitrario.

CSS Tailwind Convertir

Abrir herramienta