Google Web Fonts und PDF-Erzeugung aus HTML mit wkhtmltopdf

Question

Ich verwende wkhtmltopdf um HTML-Dateien in das PDF-Format zu konvertieren. Die Ergebnisse sind erstaunlich gut, da die PDF-Datei genau so gerendert wird, wie es WebKit tun würde.

Ich verwende Google Web-Schriftarten um den Benutzern die Möglichkeit zu geben, das Erscheinungsbild des von ihnen bearbeiteten Dokuments anzupassen, indem sie die Möglichkeit haben, zwischen mehreren Schriftarten zu wählen. Es funktioniert auch perfekt in einem Browser .

Das Problem ist, dass ich die Google-Schriftarten nicht zum Laufen bekomme, wenn ich solche HTML-Dateien mit wkhtmltopdf in PDF konvertiere. Ich habe gelesen, dass andere Leute das gleiche Problem hatten Ausgabe .

Kann mir jemand helfen, das Problem zu lösen?

EDIT : Die Deklaration von @font-face direkt im CSS funktioniert ebenfalls nicht.

Answer 1

Um HTML in PDF zu konvertieren, indem Sie wkhtmltopdf versuchen zu vermeiden woff Schriftart. Verwenden Sie die truetype Format der Google Web Fonts avec base64 kodieren.

Kürzlich habe ich versucht, eine Google-Webschrift von Google Web Fonts zu verwenden. Im Browser wird sie korrekt angezeigt, aber nach der Konvertierung von HTML in PDF wird sie nicht angezeigt.

Nachdem ich ausgiebig im Internet gesucht hatte, fand ich schließlich Tools zur Kodierung von Schriftarten in den base64 Format und hat auch CSS für @font-face .

Lesen Sie die Lösung aquí .

Answer 2

Eine einfache Lösung: Verschlüsseln Sie Ihre Schriftart mit Base64 und betten Sie sie in das CSS ein:

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

FontSquirrel kann dies für Sie über die erweiterten Optionen seiner Webfont-Generator Google und andere Schriftarten können kodiert werden mit diesem Werkzeug .

Ich habe diese Lösung verwendet mit pdfkit y wicked_pdf die über wkhtmltopdf funktionieren, also nehme ich an, dass dies auch mit dem nativen wkhtmltopdf auch.

Answer 3

Ich hatte das gleiche Problem und löste es, indem ich die Schriftarten herunterlud und sie in einer lokalen Datei auf meinem Webserver mit dieser font-face-Deklaration ausführte:

@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;
}

Ich konnte diese Schriftart finden auf Schriftart Eichhörnchen aber das kann sich ändern.

Ich denke, was mit den Schriftarten von Google passiert, ist, dass es versucht, nur das Format zu laden, von dem es denkt, dass dieser Browser es will, was für WebKit woff ist (glaube ich). Aber wkhtmltopdf kann keine Woff-Schriftart in eine PDF-Datei einbetten und verwendet daher standardmäßig die serifenlose Schriftart. Wenn Sie alle deklarieren, wird die TrueType-Schriftart einbezogen, die in der PDF-Datei tatsächlich verwendet wird.

Außerdem müssen Sie die Schriftart, die Sie verwenden wollen, als erste in jeder font-family-CSS-Definition definieren, sonst ignoriert wkhtmltopdf sie einfach.

Answer 4

Ich habe gerade getestet, dass mit dem @import Notation funktioniert:

<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>

Ich verwende django-wkhtmltopdf Version 2.0.3

UPDATE: funktioniert noch in django-wkhtmltopdf 3.3.0

Answer 5

Ich muss eine Unmenge von Variationen ausprobiert haben, um dies zu erreichen (von der lokalen Ebene aus). Ich versuche, Open Sans Condensed über WKHtmlToPdf in eine PDF-Datei einzubetten.

Ich denke, es ist wichtig, dass Sie die Open Sans Condensed ttf direkt von Google herunterladen und installieren. Es ist auch wichtig, nach der Installation neu zu starten, um anderen Diensten den Zugriff zu ermöglichen. Ich habe die ttf ursprünglich von font-squirrel heruntergeladen und condensed war als "Open Sans" in Windows/fonts aufgelistet, was falsch ist, wenn man nach der Google-Installation nachschaut, ist sie als "Open Sans Condensed Light" aufgelistet, so dass sogar Googles local('Open Sans Cond Light') Skript falsch ist.

Wie bereits erwähnt, müssen Sie bei der Dehnung und den Gewichten explizit sein, und das hat bei mir funktioniert:

    @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');}