我正在使用Google Web Fonts让用户能够自定义文档的外观,提供了几种字体供选择。在浏览器中也可以很好地运行。
问题是,在使用wkhtmltopdf将这些HTML文件转换为PDF时,无法加载Google Fonts。我看到其他人也遇到了相同的问题。
请问有谁能帮我解决这个问题吗?
编辑:直接在CSS中声明@font-face也不起作用。
使用wkhtmltopdf
将HTML转换为PDF时,应尽量避免使用woff
字体。使用Google Web Fonts
的truetype
格式并进行base64
编码。
最近我尝试从Google Web Fonts中使用字体。在浏览器中显示正确,但在将HTML转换为PDF之后却无法显示。
在广泛搜索网络后,我终于找到了将字体编码为base64
格式并获得@font-face
CSS的工具。
阅读解决方案请点击这里。
一种简单的解决方案:将字体进行Base64编码并嵌入CSS中:
@font-face {
font-family: 'OpenSans';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
通过Webfont Generator的高级选项,FontSquirrel 可以为您完成此操作;Google 和其他字体可以使用此工具进行编码。
我已经在pdfkit
和wicked_pdf
中使用了此解决方案,它们通过wkhtmltopdf工作,因此我认为这应该也适用于本地的wkhtmltopdf
。
wkhtmltopdf
时,无法与自定义字体配合使用,但在我们的Ubuntu测试和生产服务器上似乎可以正常工作。 - Topher Hunt我曾经遇到过同样的问题,并通过下载字体并使用以下font-face声明在本地文件上运行它来解决:
@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;
}
我在字体松鼠上找到了这种字体,但你的情况可能会有所不同。
我认为,谷歌提供的字体只加载它认为该浏览器需要的格式,对于WebKit来说这个格式是woff(我相信)。但wkhtmltopdf
不能在PDF中嵌入woff字体,因此默认使用sans-serif。通过声明所有字体,TrueType字体被包含在其中,这就是PDF实际使用的字体类型。
还有,你需要将要使用的字体定义为任何font-family CSS定义中的第一个,否则wkhtmltopdf将会忽略它。
我刚刚测试了使用@import
标记符的方法是可行的:
<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
我正在使用django-wkhtmltopdf 2.0.3版本
更新:在django-wkhtmltopdf 3.3.0版本中仍然有效
我已经为此苦苦挣扎了两天,如果以上任何答案都对你无效,我的建议是:
在托管 Web 服务器的计算机上安装字体(ttf),并像普通字体一样在 CSS 中引用它。
body{
font-family: 'Lato';
}
src: {{ public_path('fonts/noto-sans.regular.ttf') }};
您是如何导入它的呢? - Pathros我一定尝试了无数种方式才使其生效(从本地)。 我正在尝试通过WKHtmlToPdf将Open Sans Condensed嵌入到pdf中。
我认为重要的是直接从谷歌下载和安装Open Sans Condensed ttf并进行安装。 安装后重新启动以允许其他服务访问非常重要。 我最初从font-squirrel下载了ttf,压缩后在windows / fonts中列为“Open Sans”,这是错误的。 如果您在google安装后查看,它将列为“Open Sans Condensed Light”,因此即使是谷歌的local('Open Sans Cond Light')
脚本也是错误的。
正如之前提到的,您需要明确拉伸和重量,这就是对我有效的方法:
@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');}
以下内容对我有效。请注意包含扩展字符集(如果需要):
```<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
</style>
--javascript-delay 1000
并且 Google 字体的文本开始展示。
[wkhtmltopdf 0.12.4 (带有补丁的 QT 版本)]
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans";
[lang="sq"] {font-family: 'Noto Sans', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic";
[lang="ar"] {font-family: 'Noto Sans Arabic', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali";
[lang="bn"] {font-family: 'Noto Sans Bengali', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian";
[lang="ka"] {font-family: 'Noto Sans Georgian', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati";
[lang="gu"] {font-family: 'Noto Sans Gujarati', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew";
[lang="he"] {font-family: 'Noto Sans Hebrew', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari";
[lang="hi"] {font-family: 'Noto Sans Devanagari', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan";
[lang="bo"] {font-family: 'Noto Serif Tibetan', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gurmukhi";
[lang="pa"] {font-family: 'Noto Sans Gurmukhi', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu";
[lang="ur"] {font-family: 'Noto Nastaliq Urdu', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Tai+Viet";
[lang="vi"] {font-family: 'Noto Sans Tai Viet', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC";
[lang="zh-hans"] {font-family: 'Noto Sans SC', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC";
[lang="zh-hant"] {font-family: 'Noto Sans TC', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP";
[lang="ja"] {font-family: 'Noto Sans JP', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR";
[lang="ko"] {font-family: 'Noto Sans KR', sans-serif !important;}
</style>
请确保您在打印样式表中不声明要使用的字体。