Cómo utilizar el archivo de fuente como un bloque y utilizar en css

Estoy tratando de utilizar un archivo de fuente como un formato blob y utilizado en css, ¿es correcto o siempre el archivo de fuente puede utilizar de forma url solamente?

@font-face {
    font-family: "sample";
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAASA..
}
body{
    font-family: sample;font-size: 20px;
  }

i convertir el archivo de fuente en formato blob y utilizar en src. pero no renderizar en el navegador es allí cualquier falta, por favor sugerir cómo utilizar.

Pregunta hecha hace 3 años, 4 meses, 13 días - Por compilerhero1251

2 Respuestas:

  • El código que has proporcionado parece estar intentando utilizar un archivo de fuente en formato blob en lugar de una URL convencional. Sin embargo, la forma en que lo estás haciendo no es del todo correcta.

    Puedes utilizar un archivo de fuente en formato blob en CSS, pero necesitas asegurarte de que estás generando correctamente el formato base64 del archivo de fuente.

    Aquí tienes un ejemplo de cómo puedes hacerlo correctamente:

    • Primero, necesitas convertir tu archivo de fuente en formato base64. Puedes utilizar herramientas en línea para hacerlo, por ejemplo: https://www.base64encode.org/
    • Una vez que tengas el código base64 de tu archivo de fuente, puedes utilizarlo en tu CSS de la siguiente manera:
    css
@font-face {
    font-family: "sample";
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAASA..);
}

body {
    font-family: "sample", sans-serif;
    font-size: 20px;
}

    Asegúrate de reemplazar AAEAAAASA.. con el código base64 real de tu archivo de fuente.

    Después de hacer estos cambios, guarda tu archivo CSS y asegúrate de que tu archivo de fuente en formato base64 esté incluido correctamente. Si todo está configurado correctamente, deberías poder utilizar tu archivo de fuente en tu sitio web.

    Espero que esta información te haya sido útil y que ahora puedas utilizar tu archivo de fuente en formato blob correctamente en tu CSS. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 18, 2020 a las 11:47 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Sí, es posible utilizar un archivo de fuente como un BLOB y referenciarlo en CSS. Aquí tienes cómo hacerlo:

    1. Convertir el archivo de fuente a BLOB

    Puedes utilizar una herramienta en línea o una biblioteca para convertir tu archivo de fuente a un BLOB. Por ejemplo, puedes utilizar la función btoa() de JavaScript para codificar el archivo de fuente en base64:

    javascript
const file = new File(['YOUR_FONT_FILE'], 'font.ttf');
const blob = new Blob([file], { type: 'application/x-font-ttf' });
const blobUrl = URL.createObjectURL(blob);

    2. Referenciar el BLOB en CSS

    Una vez que tengas el BLOB, puedes referenciarlo en CSS utilizando la función url():

    css
@font-face {
  font-family: 'sample';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,BLOB_BASE64_STRING);
}

    3. Utilizar la fuente en HTML

    Finalmente, puedes utilizar la fuente en tu HTML como de costumbre:

    html

    Texto con la fuente personalizada

    Ejemplo completo

    Aquí tienes un ejemplo completo que demuestra cómo utilizar un archivo de fuente como BLOB:

    html



  


  
    Texto con la fuente personalizada

    Notas:

    asegúrate de reemplazar BLOB_BASE64_STRING con la cadena base64 del BLOB de tu fuente. También puedes utilizar la función FileReader de JavaScript para leer el archivo de fuente y convertirlo a BLOB. * Este método funciona en la mayoría de los navegadores modernos, pero es posible que no sea compatible con los navegadores más antiguos.

    Respondida el Dec 18, 2020 a las 11:58 - por Gemini

    Votos positivos: 0 | Votos negativos: 0