wkhtmltopdf 关于字体的问题

本文章分享 wkhtmltopdf,wkhtmltoimage 与字体相关的问题 相关内容

补充,根据 Krzysztof Zych 的建议,使用 WeasyPrint 替代 wkhtmltoimage 是比较理想的。 打开

在使用wkhtmltopdf 或 wkhtmltoimage 的时候,会出现字体相关问题。例如中文无法输出,设置的 font-famaliy 不生效的情况。

1、拷贝中文字体到 服务器,这里以centos举例

例如我们拷贝 黑体/楷体/宋体:simhei.ttf/simkai.ttf/simsun.ttc

[root@localhost ~]# cd /usr/share/fonts
[root@localhost fonts]# ls
dejavu  simhei.ttf  simkai.ttf  simsun.ttc


[root@localhost ~]# fc-list
/usr/share/fonts/dejavu/DejaVuSansCondensed-Oblique.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Oblique,Oblique
/usr/share/fonts/dejavu/DejaVuSansCondensed-Bold.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Bold,Bold
/usr/share/fonts/simsun.ttc: SimSun,宋体:style=Regular,常规
/usr/share/X11/fonts/Type1/c0611bt_.pfb: Courier 10 Pitch:style=Bold Italic
/usr/share/X11/fonts/Type1/UTBI____.pfa: Utopia:style=Bold Italic
/usr/share/X11/fonts/Type1/c0419bt_.pfb: Courier 10 Pitch:style=Regular
/usr/share/fonts/dejavu/DejaVuSans.ttf: DejaVu Sans:style=Book
/usr/share/X11/fonts/Type1/c0648bt_.pfb: Bitstream Charter:style=Regular
/usr/share/fonts/simkai.ttf: KaiTi:style=Regular,Normaali
/usr/share/fonts/dejavu/DejaVuSans-Bold.ttf: DejaVu Sans:style=Bold
/usr/share/X11/fonts/Type1/cursor.pfa: Cursor:style=Regular
/usr/share/X11/fonts/Type1/UTB_____.pfa: Utopia:style=Bold
/usr/share/X11/fonts/Type1/c0583bt_.pfb: Courier 10 Pitch:style=Bold
/usr/share/X11/fonts/Type1/UTI_____.pfa: Utopia:style=Italic
/usr/share/X11/fonts/Type1/c0582bt_.pfb: Courier 10 Pitch:style=Italic
/usr/share/fonts/dejavu/DejaVuSansCondensed.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed,Book
/usr/share/fonts/dejavu/DejaVuSans-ExtraLight.ttf: DejaVu Sans,DejaVu Sans Light:style=ExtraLight
/usr/share/fonts/simhei.ttf: SimHei:style=Normal
/usr/share/fonts/dejavu/DejaVuSansCondensed-BoldOblique.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Bold Oblique,Bold Oblique
/usr/share/X11/fonts/Type1/c0633bt_.pfb: Bitstream Charter:style=Bold Italic
/usr/share/X11/fonts/Type1/c0649bt_.pfb: Bitstream Charter:style=Italic
/usr/share/fonts/dejavu/DejaVuSans-Oblique.ttf: DejaVu Sans:style=Oblique
/usr/share/X11/fonts/Type1/c0632bt_.pfb: Bitstream Charter:style=Bold
/usr/share/fonts/simsun.ttc: NSimSun,新宋体:style=Regular,常规
/usr/share/fonts/dejavu/DejaVuSans-BoldOblique.ttf: DejaVu Sans:style=Bold Oblique
/usr/share/X11/fonts/Type1/UTRG____.pfa: Utopia:style=Regular

2.1、 查看生效的中文字体

[root@localhost fonts]# fc-list :lang=zh
/usr/share/fonts/simsun.ttc: SimSun,宋体:style=Regular,常规
/usr/share/fonts/simkai.ttf: KaiTi:style=Regular,Normaali
/usr/share/fonts/simhei.ttf: SimHei:style=Normal
/usr/share/fonts/simsun.ttc: NSimSun,新宋体:style=Regular,常规

2.2、 解决中文字体不生效的情况,刷新字体缓存

[root@localhost ~]# cd /usr/share/fonts
[root@localhost fonts]# fc-cache && mkfontscale && mkfontdir


3、 对应的HTML文件引用字体,不同字体具体测试为准

font-famaliy:'SimSun'; /*宋体*/
font-famaliy:'宋体'; /*宋体*/
font-famaliy:'KaiTi'; /*楷体*/

4、 使用单独的字体配置文件,加载多个字体并使用 (未详细测试)


Ridiculously poor font support

While wkhtmltopdf loads web fonts fine (problems from point 4 notwithstanding), its handling of multiple font files listed under the same font family is atrocious. If you have mixed scripts in your output (say, addresses in Japanese, but invoice items in English), you’re out of luck. All you can do is use a single font containing every unicode character. If you want to use Google’s Noto fonts, separated per script – good luck.

One user lists a solution where you need to edit the font files to have the same family name metadata, otherwise wkhtmltopdf happily ignores your additional @font-face declarations.

However, there actually is a solution for that, and it’s also the reason why you get different results on your development machine vs a production server: the fontconfig file. Wkhtmltopdf (and most of your desktop environment) uses the fontconfig library to parse it and discover available fonts. Without fontconfig, wkhtmltopdf can only render some basic fonts like Helvetica and Times, plus whatever’s declared with @font-face.

Therefore, in four easy steps:

1.Remove @font-face declarations from your CSS.

2.Verify you’re using the correct font family name (one that’s displayed in a font chooser in your text editor or graphic program).

3.Create a fontconfig file with a single directive pointing to where you ship the font files. The path must be absolute.

4.Set the FONTCONFIG_FILE environment variable to point at this file when launching wkhtmltopdf. Again, the path must be absolute.

Remember to adjust your deploy process to output correct paths on production. And now not only you have full control of which fonts are available, but all the mixed script issues are gone!