Question

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

这部分工作正常，我使用@ font-face对不同的字体进行了实验，但到目前为止，当我使用“serif”作为字体时，会产生最佳效果。

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

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

Answer 1

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

一种是指定CSS字体样式，默认后备字体为serif。例如，要从Google字体添加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将出现在所有现代浏览器中，默认为Heroku上的serif，以及使用较旧/较简单的网络浏览器的设备。缺点是字体在浏览器中看起来是单向的，但在PDF中是不同的，因为Heroku将使用其默认的serif字体。

第二种方法是对字体（you can use this tool）进行Base64编码，并将其包含在CSS中：

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

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

Heroku上的字体使用wicked_pdf / wkhtmltopdf

1 个答案: