utiliser des polices personnalisées avec wkhtmltopdf

Je suis en train d'utiliser des polices personnalisées dans mon PDF généré avec wkhtmltopdf.
J'ai lu que vous ne pouvez pas utiliser google webfonts et que wkhtmltopdf utilise truetype .ttf fichier. Quelqu'un peut confirmer ça?
J'ai donc téléchargé un .ttf fichier à partir de google webfont et la mettre sur mon serveur, puis l'utilisation de la police:

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

et de la famille de police:

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

Et maintenant, le texte qui est censé rendre avec Jolly Locataire de la police n'apparaît pas à tous, la page est vide.

Ce que je fais mal?

PS: j'ai essayé avec différent .fichiers ttf.

J'ai testé cela et a été en mesure d'obtenir une TTF de travail sans problème. Êtes-vous sûr que la src url est correcte? Êtes-vous sûr que le FDF est de travail (avez-vous l'essayer sur votre système)? Vous pourriez avoir plus de chance si vous installer la police sur votre serveur et viens de l'appeler via CSS normal.
g33kinfo.com/info/archives/1806
Il fonctionne lors de l'utilisation de polices web de google avec <link href='fonts.googleapis.com/css?family=Jolly+Hébergées' rel='stylesheet' type='text/css" >. Peut-être il y avait effectivement un problème avec mon .ttf fichier en fin de compte...
Salut Marronsuisse, pouvez-vous expliquer un peu plus ce que vous avez utilisé? Je vais avoir le même problème mais il ne marche pas de toute façon.

InformationsquelleAutor fkoessler | 2012-05-16

20

Puisque c'est un polices Web de Google, vous n'avez pas besoin d'écrire @font-face en vous de la feuille de style juste la suite de la balise link dans votre code source:
```
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
```
et
```
 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>
```
fonctionne.

Par la façon dont, dans votre code, vous définissez @font-face famille font-family: Jolly; et en l'utilisant comme p { font-family: 'Jolly Lodger', cursive; } c'est faux, parce que c'est le décalage de la police nom de famille.
- Je n'utilise pas la balise de lien sur le but, car j'ai lu que wkhtmltopdf ne fonctionne pas lors de la récupération de la police directement à partir de google webfonts. C'est pourquoi j'ai télécharger la police et de l'inclure dans mon projet. À l'aide de la balise fonctionne très bien lorsque j'utilise la police de caractères dans une page html bien. Vous avez raison, il y a une erreur dans mon code, je vais le modifier, mais même si le nom correspond à, la police n'apparaît toujours pas dans le fichier pdf. J'ai essayé avec un fichier ttf et otf fichier.
- J'ai utilisé le code dans cette réponse, et il a bien fonctionné (à l'aide de wkhtmltoimage). Peut-être que la version actuelle de la wkhtmltox outils ont été mis à jour pour supporter cela?
- Ne fonctionne pas pour moi, pour wkhtmltopdf sur Linux 0.12.2.1 (ni sur MacOS)
InformationsquelleAutor Daljit
18

Je parie que vous appelez wkhtmltopdf partir d'un site web wrapper à l'aide de IIS. C'est pourquoi certaines personnes disent que cela fonctionne pour eux. Ils sont probablement à l'appel de wkhtmltopdf à partir de la ligne de commande, auquel cas on peut résoudre les liens relatifs en CSS URL()s, mais si vous appelez à partir de snappy ou vous pouvez contourner le problème en spécifiant une URL comme dire URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf') à la place.

L'incapacité de résoudre correctement les liens relatifs au CSS URL() balises semble être rompu dans wkhtmltopdf 0.11.0_rc1 mais certaines versions antérieures peuvent travailler bien. Le même problème se produit avec d'autres CSS URL() balises comme lors de l'appel de fond des images à la résolution de l'emplacement du fichier est cassé. Fait intéressant cependant, dans le cas des images, si vous utilisez <IMG SRC=>, de 0,11.0_rc1 est capable de trouver le fichier, même si un chemin d'accès relatif est fourni. Le problème semble être limité à l'URL() balises à l'intérieur CSS.

EDIT: j'ai découvert que si vous utilisez file:/// avec tous les avant des barres obliques dans le chemin, alors il fonctionne. En d'autres termes URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf') devrait fonctionner.
- Merci. file:// Url semblent être la chose avec des polices locales et font-face. E. g. url(file:///my/dir/font.ttf) sur Linux. Je mistakedly essayé local(), mais je pense que c'est quelque chose comme le référencement des polices sans chemins (sur les polices installées répertoires).
- Résolution relative des liens est toujours en panne dans 0.12.* à l'aide de wrapper sur *nix.
InformationsquelleAutor Bezinga
10

Comme indiqué ci-dessus par Yardboy nous avons constaté que l'encodage base64 la police truetype dans notre CSS fonctionne bien. Mais je voulais partager une idée supplémentaire.

Nous utilisons 4 personnaliser les polices de tous unique nommée 'Light' 'Medium' etc..

- Je utiliser avec openssl toolkit pour encoder en base64 avec de bons résultats. Mais vous pouvez également utiliser fontsquirrel. Juste être sûr de supprimer tous les autres types de police ('woff' 'otf' .. ). Nous avons constaté que l'utilisation de truetype exclusivement travaillé mystérieusement.

Encoder fichier, garniture de sortie et l'ajouter dans le presse-papiers
```
openssl base64 -in bold.ttf | tr -d '\n' | pbcopy
```
Dans Windows, vous devez installer openssl et l'ajouter au path puis
```
openssl base64 -in bold.ttf | tr -d '\n' | clip
```
ou tout simplement utiliser ce genre de sites

Ajouter à la police css, la propriété src
```
   @font-face {
      font-family: 'Bold';
      font-style: normal;
      font-weight: normal;
      src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
    }
```
Rendu de la sortie dépendra de votre wkhtmltopdf de la version et de la saveur. Parce que nos serveurs Debian et je développe sur OSX je l'ai testé sur une machine virtuelle à l'échelle locale.
- Voulez-vous dire cela incorporer les polices dans les documents PDF générés?
InformationsquelleAutor tgk
4

Si vous en avez .ttf fichier ou .woff fichier, puis utiliser la syntaxe suivante
```
@font-face {
   font-family: 'Sample Name';
   src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
   }
```
ne pas utiliser ttf qui ne fonctionnera pas plutôt d'utiliser le nom complet 'truetype' et si vous en avez .woff ensuite utiliser 'woff' dans le format. Pour mon cas, cela a fonctionné.

Cependant, la meilleure pratique est d'utiliser les liens à Google polices de l'API qui est mieux que de ne pas arriver qui correspondent à vos critères puis utiliser cette technique ci-dessus, il travaillera

InformationsquelleAutor ProgrammingNinja
3

Je vais juste ajouter ma réponse ici aussi, au cas où quelqu'un pourrait avoir besoin d'elle.

J'ai été en utilisant Rotativa qui s'appuie sur wkhtmltopdf, et ce que j'ai utilisé a été le suivant:
```
@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");
}
```
...et il semble de Rotativa est de ramasser le SVG-version. Si je les réorganiser, il fonctionne encore, mais si je supprime le SVG-version, il s'arrête de fonctionner.

Peut valoir le coup. Ne pouvez pas trouver une bonne documentation sur pourquoi il en est ainsi, cependant

InformationsquelleAutor Arve Systad
2

J'ai trouvé que Arman H. la solution de (l'encodage base64 les polices de caractères) sur cette question, a fonctionné comme un charme: Google Web Fonts et la génération de PDF en HTML avec wkhtmltopdf

InformationsquelleAutor Yardboy
0

Après avoir fait toutes les solutions proposées (certains qui ont effectivement travaillé), j'ai trouvé un moyen plus facile solution:
```
<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
```
Vous pouvez simplement utiliser la @import notation pour inclure la police.
- Ne fonctionne pas pour moi en wkhtmltopdf 0.12.3.2 (avec qt corrigé) - win 8.1
- Il a travaillé pour moi avec django-wkhtmltopdf==2.0.3
- Une enquête ultérieure a révélé que ce qui n'a pas de travail dans mon test était de l'importation et à l'aide d'une police de caractères avec des poids différents: seul le poids a été utilisé dans tous les documents quel que soit le css réglage. Ce problème a été corrigé dans v0.13 alpha apparemment.
- c'est bon à savoir, de sorte que le poids de la police ne peut pas être spécifié? Auriez-vous l'esprit de liaison pour le bug?
- J'ai fermé ce rapport de bug quand j'ai découvert que la version alpha a été de travail. Je n'ai pas eu de confirmation officielle, mais vous pouvez faire les tests, j'en détail dans le rapport pour voir si il vous touche: github.com/wkhtmltopdf/wkhtmltopdf/issues/3151
InformationsquelleAutor guival

Personnellement, j'ai dû mettre de la famille de polices sur un div (j'ai d'abord voulu un 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>

InformationsquelleAutor Benoit Duffez

0

à l'aide de @import de ne pas aller chercher la police, vous devez ajouter .ttf fichier au projet

InformationsquelleAutor ITbug

Vous devez vous connecter pour publier un commentaire.