Estoy trabajando en un proyecto basado en la web que está completamente en Javascript. En él, quiero que los usuarios puedan formatear su texto exactamente como lo deseen. Naturalmente, me gustaría que tuvieran la posibilidad de cargar sus propias fuentes. Sin embargo, no estoy seguro de cómo leer el archivo que cargan. Puedo aceptar el archivo, pero no puedo utilizar su .ttf/.woff/woff2, etc. como un archivo de fuente real. He usado la API de FileReader y he leído un ttf como DataUrl, que lo coloca en base64. Sin embargo, no estoy seguro de cómo volver a convertirlo en un archivo.
Encontré este código de otra publicación hecha aquí, pero no hace exactamente lo que necesito que haga:
//read the file const reader = new FileReader(); reader.addEventListener('load', (event) => { <usersSelectedFile>.src = event.target.result; }); var fontFile = reader.readAsDataURL(file); Con esto obtengo el archivo en base64. Sé cómo usar font-face , pero he intentado pasar este fontFile en una hoja de estilo de fuente, pero no obtuve nada.
Mi última pregunta es: ¿Cómo puedo leer un archivo en base64 como si fuera un archivo normal? ¿Cómo debo hacer referencia a él en font-face ?
TAMBIÉN: quiero mencionar que estoy tratando de que esto se almacene en localStorage, ya que no me gustaría que los cambios realizados por el usuario fueran globales.
Este es un problema interesante del que me gustaría saber la solución definitiva. Lo mejor que pude encontrar al buscar fue esta solución , que utiliza una API para este problema específico. No lo he probado hasta el momento, pero parece fiable.
En cuanto al problema de almacenamiento local, ¿ha intentado convertir el archivo en una cadena JSON usando JSON.stringify() y luego usando localStorage.setItem('name',DATAHERE)? No estoy seguro de si esto funciona con archivos, pero esto es lo que uso para matrices e información que no es de cadenas cuando guardo en localStorage.
Perdona por no tener nada concreto para ti. Tengo muchas ganas de seguir trabajando en esto si ninguna de mis recomendaciones te ayudó.