4

我正在使用 wicked_pdf 从 HTML 生成 PDF 并部署到 Heroku。

这在部署时一切正常，我已经使用@font-face 尝试了不同的字体，但到目前为止，当我只使用“serif”作为字体时产生了最好的结果。

我的假设是 wkhtmltopdf 使用 Heroku 服务器上的内置字体来呈现“衬线”。尽管这在 PDF 上看起来不错，但各种操作系统上的浏览器会为“serif”呈现不同的字体 - 所以我想尝试为 HTML 找到匹配的字体。

是否可以找出 Heroku 服务器上安装了哪些字体以及哪些字体映射到“serif”？

4

1 回答 1

3

您可以通过 CSS 显式设置您想要的字体，以便在不同系统和浏览器之间获得一致的字体呈现。我可以想到两种方法：

一种是指定 CSS 字体样式，默认后备字体为serif. 例如，要从 Google Fonts 添加 Droid Serif 字体，并将其用作主要body字体样式：

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style>
    body {
        font-family: 'Droid Serif', serif;
    }
</style>

Droid Serif将显示在所有现代浏览器中，默认显示serif在 Heroku 和具有较旧/较简单网络浏览器的设备上。缺点是字体在浏览器中看起来是一种方式，但在您的 PDF 中会有所不同，因为 Heroku 将使用其默认的衬线字体。

第二种方法是对字体进行 Base64 编码（您可以使用此工具），并将其包含在您的 CSS 中：

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

这也适用于所有现代浏览器，额外的好处是还可以在 Heroku 上工作，为您提供一致的字体渲染。这种方法特别方便，因为您不仅可以在浏览器中获得一致性，而且可以在您的开发环境和 Heroku 中获得一致性，因为您不必在 CSS 中使用 git-push 字体和弄乱本地/绝对路径。

于 2013-07-14T19:08:57.943 回答