18 votos

Generación Google Web Fonts y PDF de HTML con wkhtmltopdf

Estoy usando wkhtmltopdf para convertir los archivos HTML en formato PDF, da unos resultados sorprendentemente buenos, haciendo que el PDF exactamente como WebKit iba a hacer.

Estoy usando Google Web Fonts para dar a los usuarios la posibilidad de personalizar la apariencia del documento que se edita, ofreciéndoles la posibilidad de elegir entre un par de fuentes. También funciona perfectamente en un navegador.

Problema es que no tengo el Google de Fuentes de trabajo al convertir dichos archivos HTML a PDF con wkhtmltopdf. He leído otras personas tenían el mismo problema.

Podría alguien por favor me ayude a arreglar esto?

EDIT: declarar @font-face directamente en el CSS no funciona bien.

17voto

Shaharia Azam Puntos 670

Para convertir HTML a PDF por wkhtmltopdf intentar evitar woff tipo de fuente. Uso trutype formato de la Google Web Fonts con base64 codificar.

Recientemente traté de usar una web de google de fuentes de Google Web Fonts. Pero en el navegador se muestra correctamente, pero no se muestran después de la conversión de HTML a PDF.

A continuación, después de buscar mucha de la web por fin he encontrado las herramientas para codificar las fuentes a base64 formato codificado y también tengo el CSS para @font-face.

Leer la solución de http://blog.shahariaazam.com/use-google-web-fonts-for-wkhtmltopdf-tools/

9voto

Joseph Erickson Puntos 1476

Tuve este mismo problema y resuelto por la descarga de las fuentes y la ejecución de un archivo local en mi servidor web con este tipo de declaración:

@font-face {
    font-family: 'PT Sans';
    src: url( '/public/inc/fonts/PTS55F-webfont.eot');
    src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
         url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Yo era capaz de encontrar esta fuente en Fuente de Ardilla, pero su kilometraje puede variar.

Creo que lo que pasa con las fuentes de Google es que se está tratando de cargar sólo el formato que se piensa que este navegador quiere, que para WebKit es woff (creo). Pero wkhtmltopdf no se puede incrustar un woff fuente en un PDF, y así volver predeterminado sans-serif. Al declarar todos ellos, la fuente TrueType está incluido, que es lo que el PDF que realmente utiliza.

También, es necesario definir el tipo de letra que desea utilizar como la primera de ellas en cualquier font-family definición CSS o wkhtmltopdf será simplemente lo ignoran.

8voto

Arman H Puntos 2206

Una solución simple: Base64 codificar la fuente (FontSquirrel puede hacer esto para usted a través de las opciones avanzadas de su Webfont Generador; Google y otras fuentes pueden ser codificados a través de esta herramienta), e incluir en tu CSS:

@font-face {
    font-family: 'OpenSans';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

He utilizado esta solución con pdfkit y wicked_pdf, que trabajan a través de wkhtmltopdf, así que me imagino que esto debería funcionar con la nativa wkhtmltopdf como bueno.

1voto

Que debe haber intentado muchísimas variaciones de conseguir este trabajo (de local). Estoy tratando de conseguir Open Sans Condensed incrustado en un archivo pdf a través de WKHtmlToPdf.

Creo que es importante que usted descargue e instale el Open Sans Condensed ttf directamente desde google e instalarlo. También es importante que reiniciar el ordenador para permitir a otros el acceso de los servicios después de la instalación. He descargado el ttf de la fuente de la ardilla y el principio condensada fue catalogado como "Open Sans" en windows/fonts, lo cual es incorrecto, si se mira después de instalar el google es catalogado como el "Open Sans Condensed Light" por lo que incluso google, local('Open Sans Cond Light') script está mal.

Como se mencionó antes es necesario ser explícito con el estiramiento y pesos, así que esto es lo que ha funcionado para mí:

    @font-face { 
     font-family: 'Open Sans'; 
     font-style: normal; 
     font-weight: 400; 
     src: local('Open Sans');
    }

    @font-face { 
     font-family: 'Open Sans Condensed'; 
     font-stretch:condensed; 
     font-style: normal; 
     font-weight: 300; 
     src: local('Open Sans Condensed Light');
    }

@@font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}

0voto

Andres Ilich Puntos 41712

Asegúrese de que no está declarando qué fuente va a imprimir con en su hoja de estilos de impresión.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: