css - example - Convirtiendo y renderizando fuentes web a base64-mantenga una apariencia original

img src base64 decode

Question

Quiero diferir la carga de fuentes en mi sitio inspirado en la lógica de carga diferida de la fuente para Smashing Magazine .

La parte principal de esto es convertir las fuentes a base64 y preparar su archivo CSS con eso. Mis pasos hasta ahora:

1. Elija las fuentes en Google Web Fonts y descárguelos.
2. Utilice Font Squirrel Webfont Generator para convertir archivos TTF descargados a archivos CSS con fuentes WOFF incrustadas en base64 (Opciones de experto -> CSS -> Encode Base64).
3. Cargar asincrónico de archivo CSS (no importante aquí).

Fragmento de CSS para Open Sans Bold:

@font-face {
  font-family: ''Open Sans'';
  src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format(''woff'');
  font-weight: 700;
  font-style: normal;
}

El problema es que las fuentes convertidas se ven muy diferentes . Por ejemplo, aquí Open Sans Bold:

Observe especialmente acentos muy lejos y la letra ''a'' absolutamente horrible. Otras familias de fuentes y variantes también se ven muy diferentes (distorsiones de tamaño y forma, etc.).

Entonces, la pregunta es: ¿cómo se codifican correctamente los archivos TTF de Google Web Fonts (o cualquier otra fuente) al formato base64 y se usa para que el resultado sea idéntico al del archivo original?

Answer 1

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 las instrucciones TrueType (sugerencias) se modifiquen, lo que a su vez afectará a 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 incorporado base64 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 use 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, esto es solo una plantilla de ejemplo)