Google Webfonts und PDF-Generierung aus HTML mit wkhtmltopdf

Question 1

ich benutze wkhtmltopdf um HTML-Dateien in das PDF-Format zu konvertieren; Es liefert überraschend gute Ergebnisse und rendert das PDF genau so, wie es WebKit tun würde.

ich benutze Google Webfonts um Benutzern die Möglichkeit zu geben, das Erscheinungsbild des von ihnen bearbeiteten Dokuments anzupassen, indem ihnen die Möglichkeit geboten wird, zwischen einigen Schriftarten zu wählen. Es funktioniert auch perfekt in einem Browser.

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

Könnte mir bitte jemand helfen, das zu beheben?

BEARBEITEN: Das Deklarieren von @font-face direkt im CSS funktioniert auch nicht.

Question 2

So konvertieren Sie HTML in PDF von wkhtmltopdf versuchen zu vermeiden woff Schriftart. Verwenden Sie die truetype Format der Google Web Fonts mit base64 kodieren.

Kürzlich habe ich versucht, einen Google Web Font von Google Web Fonts zu verwenden. Im Browser wird es korrekt angezeigt, aber nach der Konvertierung von HTML in PDF nicht.

Nachdem ich das Internet ausgiebig durchsucht hatte, fand ich endlich Tools zum Codieren von Schriftarten in die base64 Format und bekam auch CSS für @font-face.

Lesen Sie die Lösung Hier.

Question 3

Eine einfache Lösung: Base64-kodieren Sie Ihre Schriftart 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 durch die erweiterten Optionen von FontSquirrel erledigen Webfont-Generator; Google- und andere Schriftarten können codiert werden mit diesem Werkzeug.

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

Question 4

Ich hatte dasselbe Problem und löste es, indem ich die Schriftarten herunterlud und sie mit dieser Schriftartdeklaration aus einer lokalen Datei auf meinem Webserver 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 auf finden Schriftart Eichhörnchen, aber Ihr Kilometerstand kann variieren.

Ich denke, was mit den Schriftarten von Google passiert, ist, dass es versucht, nur das Format zu laden, von dem es glaubt, dass dieser Browser es wünscht, was für WebKit (glaube ich) schwach ist. Aber wkhtmltopdf kann keine Woff-Schriftart in eine PDF-Datei einbetten und wird daher standardmäßig wieder auf Sans-Serif zurückgesetzt. Indem Sie alle deklarieren, wird die TrueType-Schriftart eingeschlossen, die das PDF tatsächlich verwendet.

Außerdem müssen Sie die Schriftart, die Sie verwenden möchten, als erste in einer CSS-Definition für die Schriftartfamilie definieren, sonst wird wkhtmltopdf sie einfach ignorieren.

Question 5

Ich habe das gerade mit dem getestet @importNotation funktioniert:

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

Ich verwende django-wkhtmltopdf Version 2.0.3

Question 6

Ich habe jetzt seit ungefähr zwei Tagen damit zu kämpfen, mein Rat an Sie, wenn keine der obigen Antworten für Sie funktioniert:

Installieren Sie die Schriftart (ttf) auf dem Computer, der den Webserver hostet, und fordern Sie sie einfach im CSS an, genau wie Sie es mit einer gewöhnlichen Schriftart tun würden.

body{
    font-family: 'Lato';
}

Jetzt wkhtmltopdf sollte in der Lage sein, die Schriftart einzuschließen

Question 7

Ich muss eine Unmenge von Variationen ausprobiert haben, um diese Arbeit zu bekommen (von lokal). Ich versuche, Open Sans Condensed über WKHtmlToPdf in ein PDF einzubetten.

Ich denke, es ist wichtig, dass Sie die Open Sans Condensed ttf direkt von Google herunterladen und installieren und installieren. Es ist auch wichtig, neu zu starten, um anderen Diensten nach der Installation Zugriff zu gewähren. Ich habe das ttf ursprünglich von font-squirrel heruntergeladen und Condensed wurde als “Open Sans” in Windows/Fonts aufgeführt, was falsch ist. Wenn Sie nach der Google-Installation suchen, wird es als “Open Sans Condensed Light” aufgeführt, also sogar von Google local('Open Sans Cond Light') Skript ist falsch.

Wie bereits erwähnt, müssen Sie die Dehnung und die Gewichte explizit angeben, also hat Folgendes für mich 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');}

Question 8

In meinem Fall musste ich diese Option nur hinzufügen

--javascript-delay 1000

und Google Font-Text wurde angezeigt.

[wkhtmltopdf 0.12.4 (with patched qt)]