使用 wkhtmltoimage 渲染时字体太小答案

【问题标题】：Font size too small when rendering with wkhtmltoimage使用 wkhtmltoimage 渲染时字体太小
【发布时间】：2019-03-14 18:23:26
【问题描述】：

我的目标是将文本渲染成图像。我希望布局和大小是静态的，并且字体大小可以根据要呈现的文本量进行调整。我选择的工具是 wkhtmltoimage 0.12.5，想法是这样我可以利用许多 css 样式选项。顺便说一句，我在 Mac 上。

这是我的 Test.html

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="flowtype.js"></script>
</head>
<body>
<div>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>
<script type="text/javascript">
$('body').flowtype();
</script>
</body>
</html>

流类型：http://simplefocus.com/flowtype/

这在浏览器中有效，但在通过 wkhtmltoimage 渲染时无效。

我的命令行调用是

wkhtmltoimage --width 300 --height 100 Test.html Test.png

文字看起来小得离谱。窗口大小有问题？

我也很乐意使用 wkhtmltopdf 并渲染为 pdf，但我也无法让它在那里工作。

想法？

【问题讨论】：

您是否尝试过以下选项？ --disable-smart-shrinking（或在配置文件中，例如：disable-smart-shrinking: true）

标签： javascript html css wkhtmltopdf wkhtmltoimage

【解决方案1】：

在这种情况下wkhtmltoimage 工作正常，您只需调整其fontRatio 设置以使文本更大。或者，您可以增加您正在渲染的--width，使其更符合标准浏览器窗口，例如1200 像素。

问题在于 300px 是一个非常小的宽度，而 FlowType 默认每行定位 45-75 个字符。例如，如果我们假设每行有 60 个字符长，这意味着每个字符只有 5px 宽，所以这就是文本看起来太小的原因。如果您将浏览器窗口的大小缩小到 300 像素，您会看到文本的大小与其在 wkhtmltoimage 中呈现的大小相同。

要增加 FlowType 的字体大小基础，请像这样使用 fontRatio 参数。较小的值会产生较大的文本：

$('body').flowtype({
  fontRatio: 15
});

fontRatio 默认为 30，因此请尝试使用较小的值（例如 15）来增加文本大小。

这是一个可运行的示例，显示宽度为 300px 的元素的不同 fontRatio 值之间的差异。

截图：

代码片段：

$('.c1').flowtype(); // Default, fontRatio = 30

$('.c2').flowtype({fontRatio: 15});

.c1, .c2 {
  width: 300px;
  border: solid red 2px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fastcdn.org/FlowType.JS/1.1/flowtype.js"></script>

<div class="c1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
<div class="c2">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>

【讨论】：

你的例子，完全一样，对我也很好。但是，当我开始进行调整时，它又开始在这里和那里分崩离析。这也让我意识到，流类型可能不是我需要的，因为我的目标不是一行中的一定数量的字符。不过，感谢您的努力