Saltar al contenido

Conversión y renderizado de fuentes web a base64: mantenga el aspecto original

Solución:

En las opciones de Font Squirrel Expert, asegúrese de configurar la opción ‘TrueType Hinting’ en ‘Keep Existing’. Cualquiera de las otras opciones hará que se modifiquen las instrucciones TrueType (sugerencias), lo que a su vez afectará la representación de la fuente.

Alternativamente, si está satisfecho con la representación de la fuente directamente desde GWF, puede simplemente tomar ese archivo y hacer la codificación base64 usted mismo. En OS X o Linux, use el comando base64 incorporado en Terminal / shell:

$ base64 myfont.ttf > fontbase64.txt

Para Windows, deberá descargar un programa para codificar en base64 (hay varias herramientas gratuitas / de código abierto disponibles). Copie el contenido de ese archivo, luego úselo en su CSS como:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

(Tenga en cuenta que es posible que deba realizar algunos ajustes en la información de @ font-face para que coincida con los datos de su fuente en particular; esta es solo una plantilla de ejemplo)

Utilice este fragmento de código para codificar en base64 su fuente directamente en el navegador (independiente del sistema operativo, no es necesario instalar nada)

function base64convert (files) {
  console.clear()
  const reader = new FileReader()
  reader.onload = (e) => {
    console.log(e.target.result)
  }
  reader.readAsDataURL(files[0])
}
<input type="file" onchange="base64convert(this.files)">

Luego copie la salida y péguela en su CSS:

@font-face {
    font-family: 'myfont';
    src: url("<<copied base64 string>>");
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *