it-swarm.com.de

verwenden Sie benutzerdefinierte Schriftarten mit wkhtmltopdf

Ich versuche, benutzerdefinierte Schriftarten in meinem PDF zu verwenden, das mit wkhtmltopdf erstellt wurde .. __ Ich habe gelesen, dass Sie keine Google-Webfonts verwenden können und dass wkhtmltopdf die Truetype-.ttf-Datei verwendet. Kann jemand das bestätigen? Also habe ich eine .ttf-Datei von Google webfont heruntergeladen und auf meinem Server abgelegt und dann die Schriftart verwendet:

    @font-face {
        font-family: Jolly;
        src: url('../fonts/JollyLodger-Regular.ttf') format('truetype');
    }

und Schriftfamilie:

    <style type = "text/css">
        p { font-family: 'Jolly', cursive; }
    </style>

Jetzt erscheint der Text, der mit Jolly Lodger-Schrift dargestellt werden soll, überhaupt nicht, die Seite ist leer.

Was mache ich falsch?

PS: Ich habe es mit verschiedenen .ttf-Dateien versucht.

29
fkoessler

Da es sich um eine Google-Web-Schriftart handelt, müssen Sie nicht @font-face in Ihr Stylesheet schreiben. Verwenden Sie einfach den folgenden Link-Tag in Ihrem Quellcode: 

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

und 

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

wird funktionieren.

In Ihrem Code definieren Sie @font-face family übrigens als font-family: Jolly; und verwenden diesen als p { font-family: 'Jolly Lodger', cursive; }, der falsch ist, da er nicht mit dem Namen der Schriftfamilie übereinstimmt.

19
Daljit

Ich wette, Sie rufen wkhtmltopdf von einem Web-Wrapper mit IIS an. Deshalb sagen manche Leute, dass es für sie funktioniert. Wahrscheinlich rufen sie wkhtmltopdf von der Kommandozeile aus auf. In diesem Fall können relative Links in CSS-URL (s) aufgelöst werden. Wenn Sie es jedoch von "snappy" oder ähnlichem aufrufen, können Sie das Problem umgehen, indem Sie stattdessen eine URL wie URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf') angeben.

Die Unfähigkeit, relative Links in CSS-URL () -Tags richtig aufzulösen, scheint in wkhtmltopdf 0.11.0_rc1 fehlerhaft zu sein, einige frühere Versionen funktionieren jedoch möglicherweise einwandfrei. Dasselbe Problem tritt bei anderen CSS-URL () -Tags auf, wie beim Aufrufen von Hintergrundbildern. Die Auflösung des Dateispeicherorts ist fehlerhaft. Interessanterweise kann 0.11.0_rc1 bei Bildern mit <IMG SRC=> die Datei finden, auch wenn ein relativer Pfad angegeben wird. Das Problem scheint auf URL () - Tags in CSS beschränkt zu sein.

EDIT: Ich habe herausgefunden, dass es funktioniert, wenn Sie file:/// mit allen forward slashes im Pfad verwenden. Mit anderen Worten sollte URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf') funktionieren.

17
Bezinga

Wie bereits erwähnt by Yardboy haben wir festgestellt, dass base64, das die TrueType-Schriftart in unserem CSS codiert, gut funktioniert. Aber ich wollte einige zusätzliche Erkenntnisse teilen. 

Wir verwenden 4 benutzerdefinierte Schriftarten, die eindeutig 'Light''Medium' usw. benannt sind. 

Ich benutze das openssl-Toolkit, um base64 mit guten Ergebnissen zu kodieren. Sie können alternativ fontsquirrel verwenden. Stellen Sie sicher, dass Sie alle anderen Schriftarttypen entfernen ('woff''otf' ..). Wir fanden, dass die Verwendung von truetype ausschließlich geheimnisvoll funktionierte.

Datei kodieren, Ausgabe trimmen und zur Zwischenablage hinzufügen

openssl base64 -in bold.ttf | tr -d '\n' | pbcopy

In Windows sollten Sie openssl installieren und dann dem Pfad hinzufügen

openssl base64 -in bold.ttf | tr -d '\n' | clip

oder benutzen Sie einfach diese Art von Websites

Zur CSS-Schriftart hinzufügen src-Eigenschaft

   @font-face {
      font-family: 'Bold';
      font-style: normal;
      font-weight: normal;
      src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
    }

Die gerenderte Ausgabe hängt von Ihrer wkhtmltopdf-Version und Ihrem Geschmack ab. Da unsere Server Debian ausführen und ich unter OSX entwickle, habe ich lokal auf einem VM getestet. 

8
tgk

Wenn Sie eine .ttf-Datei oder eine .woff-Datei haben, verwenden Sie die folgende Syntax 

@font-face {
   font-family: 'Sample Name';
   src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
   }

verwenden Sie nicht ttf, das nicht funktionieren kann, sondern verwenden Sie den vollständigen Namen 'truetype'. Wenn Sie .woff verwenden, verwenden Sie 'woff' im Format. Für meinen Fall hat es funktioniert.

Es empfiehlt sich jedoch, Links zur Google-Fonts-API zu verwenden. Wenn dies nicht Ihren Kriterien entspricht, verwenden Sie die obige Technik

4

Ich füge meine Antwort auch hier hinzu, falls es jemand braucht.

Ich habe Rotativa verwendet, das auf wkhtmltopdf aufbaut, und was ich am Ende verwendet habe, war folgendes:

@font-face {
    font-family: "testfont";
    src: url("/UI/Fonts/609beecf-8d23-4a8c-bbf5-d22ee8db2fc9.woff") format("woff"),
         url("/UI/Fonts/1cd9ef2f-b358-4d39-8628-6481d9e1c8ce.svg#1cd9ef2f-b358-4d39-8628-6481d9e1c8ce") format("svg");
}

... und es scheint, dass Rotativa die SVG-Version aufgreift. Wenn ich sie neu ordne, funktioniert es immer noch, aber wenn ich die SVG-Version entferne, funktioniert sie nicht mehr.

Könnte einen Schuss wert sein. Ich kann jedoch keine gute Dokumentation finden, warum dies so ist

2
Arve Systad

Ich fand, dass die Lösung von Arman H. (base64, die die Schriftarten codiert) zu dieser Frage wie ein Zauber wirkt: Google Web Fonts und PDF Generierung aus HTML mit wkhtmltopdf

1
Yardboy

Nachdem ich alle vorgeschlagenen Problemumgehungen durchgeführt hatte (einige funktionierten tatsächlich), kam ich zu einer einfacheren Lösung:

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

Sie können einfach die @import-Notation verwenden, um die Schrift einzuschließen.

0
guival

Ich persönlich musste die Schriftfamilie auf eine div setzen (ich wollte zunächst eine span)

<style>
@font-face {
    font-family: 'CenturyGothic';
    src: url("fonts/century-gothic.ttf") format('truetype');
}

.title {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 22pt;
}
</style>

...

<div class="title">This is Century Gothic</div>
0
Benoit Duffez

wenn Sie @import verwenden, ohne die Schriftart abzurufen, müssen Sie dem Projekt eine .ttf-Datei hinzufügen

0
ITbug