web-dev-qa-db-fra.com

la police helvetica ne fonctionne pas dans wkhtmltopdf

J'ai essayé d'utiliser la police Helvetica lors de la création du fichier PDF, mais celle-ci n'est pas reflétée dans le fichier PDF.

J'ai fait des recherches sur Google et trouvé des solutions, mais aucune n’est viable.

Solution essayée 1

J'ai trouvé la même chose ici: Problème de police

Essayé la dernière solution mentionnée là-bas

la solution consiste à define @ font-face dans votre css et à avoir le lien src vers un hôte externe accessible par wkhtmltopdf

Mais la solution ne fonctionne pas.

Solution testée 2 J'ai également essayé d'utiliser Google API, mais le résultat n'est toujours pas exploitable . police helvetica

voici un exemple Exemple de police personnalisée

Solution testée 3 J'ai essayé de le faire en utilisant la propriété css @page. Mais cela ne fonctionne pas non plus.

Quelle est l'approche pour une solution viable.

htmlcsswkhtmltopdf
23
Padmalochan

Le moyen le plus simple de résoudre les problèmes de police de wkhtmltopdf consiste à coder la police en Base64 ( vous pouvez utiliser cet outil ) et l'inclure dans votre CSS:

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

Cela fonctionne avec toutes les polices (y compris Google Fonts) et garantit la compatibilité entre plates-formes sur différents ordinateurs et systèmes d'exploitation.

29
Arman H

Pour moi, charger des polices à partir de Google Fonts ne fonctionnait pas. Et mettre du binaire base64 dans un fichier CSS me semble un peu trop cher (les types coréens mesurent plusieurs mégaoctets). Je vous recommande d'installer les polices que vous devez utiliser sur la machine. Pour Ubuntu, vous pouvez simplement télécharger des fichiers de polices à partir de Google Fonts, les copier dans le répertoire $HOME/.fonts et exécuter la commande fc-cache en ligne de commande pour reconstruire la liste des polices.

$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv

Pour une application Rails, vous pouvez créer un lien symbolique

$ ln -s /your/app/root/assets/fonts ~/.fonts

Ensuite, vous pourrez lister toutes les polices disponibles.

$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....
7
baxang

Pour ajouter à la mêlée, en utilisant wkhtmltopdf 0.12.1 (with patched qt) sur linux, cela a fonctionné pour moi:

@font-face {
    font-family: dejaSansMono;
    src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
}

C'est-à-dire, en spécifiant le chemin d'accès au .ttf. Nommer simplement une famille de polices, n’importe quelle famille de polices, n’a pas fonctionné même si cela s’est fait dans le navigateur.

3
delicateLatticeworkFever

J'ai eu le même problème avec PT Sans de Google. Ce qui a fonctionné pour moi a été le processus suivant:

  1. Téléchargez PT Sans de google et exécutez-le dans fontsquirrel Generator 
  2. Placez le @ font-face (je n'ai utilisé que le ttf) dans le css (dans mon cas, c'était en HTML En tête d'un fichier php)

Note que je n'ai pas utilisé base64 et que cela a fonctionné comme prévu.

J'espère que ça aide

1
user3281817

Pour convertir HTML en PDF by wkhtmltopdf essayez d’éviter l’apparence de la police woff. Utilisez le format trutype des polices Web de Google avec encodage en base64.

Récemment, j'ai essayé d'utiliser une police Web Google à partir de Google Web Fonts. Mais dans le navigateur, il s'affiche correctement, mais il ne s'affiche pas après la conversion de HTML en PDF.

Puis, après avoir effectué de nombreuses recherches sur le Web, j’ai trouvé des outils pour coder les polices au format base64 et obtenir également du CSS pour @ font-face .

0
Shaharia Azam

répondre aux besoins des utilisateurs de linux (x64): vous installez le fichier de polices ttf dans/usr/share/fonts/font-folder/font-name

puis, dans votre fichier css, utilisez le nom de police qui est répertorié dans fc-list, vous n'avez pas besoin d'utiliser @ font-face, utilisez simplement le nom de police dans votre css

exemple Verdana.ttf ======

copier de la machine locale au serveur dans /usr/share/fonts/Verdana/Verdana.ttf

fc-list pour obtenir le nom de la police (ce sera probablement Verdana)

Puis utilisez dans votre css P {font-family: 'Verdana'}

et c'est tout! m'a pris un certain temps pour le réparer.

0
Khallouki